Привет, я присоединился к команде Разработчики социальных таблиц три месяца назад. До сих пор это был отличный опыт. Любите культуру, любите свою команду, любите продукт, который я создаю. ٩ (˃̶͈̀௰˂̶͈́) و
Прямо сейчас я работаю над Guest, приложением для управления списком гостей. Наш основной интерфейсный стек - это React и Redux. Одна из целей нашей команды в этом месяце - реализовать новую функцию статистики отметок. Это совершенно новый вид для визуализации данных о заселении наших гостей, включая радиальные гистограммы и линейные диаграммы. Первое, что нам нужно решить, - это решить, какую библиотеку мы должны использовать для построения диаграмм. d3 - наш первый выбор, но построение графиков напрямую с d3 может быть затруднительным, в то время как другие библиотеки часто слишком упрощены.
Основываясь на нашем исследовании библиотеки диаграмм, созданной с помощью React и d3, мы нашли двух идеальных кандидатов: Victory и Rechart. Оба они используют декларативный подход React / JSX. Это естественный вариант для нашего стека, поскольку нам нужно только снабдить компоненты диаграммы некоторыми реквизитами. Мы сравнили их по шести различным критериям: покрытие потребностей, настраиваемость, анимация, отзывчивость, мобильная поддержка и хорошо документированные. Наконец, мы решили использовать Победу. Есть две основные причины. Во-первых, Victory поддерживает React Native, что упрощает повторное использование кода в нашем мобильном приложении. Другая причина в том, что он более настраиваемый. Иногда использование библиотеки компонентов диаграммы может вызывать разочарование. Как и любой фреймворк, который дает вам высокоуровневые абстракции, наступит момент, когда ваши потребности станут очень конкретными и не будут соответствовать. Victory предоставляет такие компоненты, как VictoryAxis, VictoryBar, VictoryLine… Он покрывает все наши потребности.
Код, который может оказаться полезным (очень приветствуется проверка кода, пожалуйста, оставьте комментарий, если у вас есть какие-либо предложения):
//radial bar chart
const colors = {
pink: ["#CB5599", "#5E6063"],
teal: ["#49C6B7", "#5E6063"]
};
<VictoryPie
data={data}
x="guest"
y={(datum) => datum.value}
style={{
labels: {fontSize: 0}
}}
colorScale={colors[color]}
innerRadius={115}
/>
//line chart
<VictoryChart>
{
data.length > 1 ? <VictoryLine
data={data}
x="time"
style={{
data: {stroke: colors[color], strokeWidth:4},
}}
y={(datum) => datum.value}
/> : null
}
<VictoryAxis
// x
tickValues={xRange.length > 1 ? xRange : ["8:00 PM"]}
tickFormat={(tick) => {
if (data.length < 1){
return tick;
}
const time = data[tick-1].time.split(":");
return formatTime(time);
}}
style={{
axis: {stroke: colors.mediumGray},
ticks: {stroke: colors.mediumGray},
tickLabels: {fontSize: 12, padding: 30, stroke:"#EAEDEF"}
}}
/>
<VictoryAxis
// y
dependentAxis
tickValues={yRange.length > 1 ? yRange : [0, 3, 6]}
style={{
axis: {stroke: "none"},
grid: {stroke:colors.mediumGray},
tickLabels: {fontSize: 12, padding: 30, stroke:colors.lightGray}
}}
/>
<VictoryScatter
data={data}
x="time"
style={{
data: {stroke: colors.lightGray, strokeWidth:3, fill:colors.lightGray},
labels: {fontSize: 30},
}}
y={(datum) => datum.value}
/>
<VictoryVoronoiTooltip
data={data}
labels={(datum) => datum.value}
y={(datum) => datum.value}
x="time"
style={{
labels: {
fill: "white"
},
flyout: {
fill: colors.mediumGray,
strokeWidth: 0
}
}}
/>
</VictoryChart>
В целом, с Victory это был отличный путь. Просмотр статистики регистрации был завершен в короткие сроки, и результат потрясающий. Хотя мне потребовалось некоторое время, чтобы найти информацию в документации библиотеки, вы всегда можете задать вопросы через Gitter.
