@krizaka/charts 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +202 -0
- package/README.md +59 -2
- package/dist/bar.d.ts +17 -0
- package/dist/bar.js +17 -0
- package/dist/bar.js.map +1 -0
- package/dist/candlestick-IG626XL4.js +13 -0
- package/dist/candlestick-IG626XL4.js.map +1 -0
- package/dist/candlestick.d.ts +42 -0
- package/dist/candlestick.js +13 -0
- package/dist/candlestick.js.map +1 -0
- package/dist/canvas-4MSYDVFO.js +14 -0
- package/dist/canvas-4MSYDVFO.js.map +1 -0
- package/dist/cartesian-BRhNQ3ib.d.ts +34 -0
- package/dist/chart.d.ts +58 -0
- package/dist/chart.js +11 -0
- package/dist/chart.js.map +1 -0
- package/dist/chunk-3CJHBJXA.js +186 -0
- package/dist/chunk-3CJHBJXA.js.map +1 -0
- package/dist/chunk-4LBXEAGC.js +133 -0
- package/dist/chunk-4LBXEAGC.js.map +1 -0
- package/dist/chunk-6FINSUOS.js +49 -0
- package/dist/chunk-6FINSUOS.js.map +1 -0
- package/dist/chunk-AA5EWWYV.js +38 -0
- package/dist/chunk-AA5EWWYV.js.map +1 -0
- package/dist/chunk-ANUCSRUN.js +43 -0
- package/dist/chunk-ANUCSRUN.js.map +1 -0
- package/dist/chunk-ARARFMNE.js +88 -0
- package/dist/chunk-ARARFMNE.js.map +1 -0
- package/dist/chunk-BISL7DYW.js +66 -0
- package/dist/chunk-BISL7DYW.js.map +1 -0
- package/dist/chunk-BV4DBGN7.js +178 -0
- package/dist/chunk-BV4DBGN7.js.map +1 -0
- package/dist/chunk-C4MFZLJM.js +19 -0
- package/dist/chunk-C4MFZLJM.js.map +1 -0
- package/dist/chunk-CSSZLFLO.js +116 -0
- package/dist/chunk-CSSZLFLO.js.map +1 -0
- package/dist/chunk-CVWSMUUB.js +378 -0
- package/dist/chunk-CVWSMUUB.js.map +1 -0
- package/dist/chunk-E5DKBSWX.js +2 -0
- package/dist/chunk-E5DKBSWX.js.map +1 -0
- package/dist/chunk-EEP7PS2L.js +54 -0
- package/dist/chunk-EEP7PS2L.js.map +1 -0
- package/dist/chunk-EQLC2QVN.js +73 -0
- package/dist/chunk-EQLC2QVN.js.map +1 -0
- package/dist/chunk-FINOPIDN.js +2 -0
- package/dist/chunk-FINOPIDN.js.map +1 -0
- package/dist/chunk-G2KF2WL4.js +2 -0
- package/dist/chunk-G2KF2WL4.js.map +1 -0
- package/dist/chunk-I3D7KUGN.js +205 -0
- package/dist/chunk-I3D7KUGN.js.map +1 -0
- package/dist/chunk-IKQV3NSL.js +76 -0
- package/dist/chunk-IKQV3NSL.js.map +1 -0
- package/dist/chunk-JTKR7ZWP.js +468 -0
- package/dist/chunk-JTKR7ZWP.js.map +1 -0
- package/dist/chunk-KNDHO67X.js +78 -0
- package/dist/chunk-KNDHO67X.js.map +1 -0
- package/dist/chunk-L2EKYWVI.js +94 -0
- package/dist/chunk-L2EKYWVI.js.map +1 -0
- package/dist/chunk-MXLITIGU.js +92 -0
- package/dist/chunk-MXLITIGU.js.map +1 -0
- package/dist/chunk-NCIQMRV3.js +155 -0
- package/dist/chunk-NCIQMRV3.js.map +1 -0
- package/dist/chunk-OB5EFDDH.js +118 -0
- package/dist/chunk-OB5EFDDH.js.map +1 -0
- package/dist/chunk-OIRHLJBC.js +83 -0
- package/dist/chunk-OIRHLJBC.js.map +1 -0
- package/dist/chunk-PBQV3B6O.js +145 -0
- package/dist/chunk-PBQV3B6O.js.map +1 -0
- package/dist/chunk-POQIHFAZ.js +2 -0
- package/dist/chunk-POQIHFAZ.js.map +1 -0
- package/dist/chunk-PWMMXRMC.js +234 -0
- package/dist/chunk-PWMMXRMC.js.map +1 -0
- package/dist/chunk-SLEJDQ3A.js +81 -0
- package/dist/chunk-SLEJDQ3A.js.map +1 -0
- package/dist/chunk-TPJDOB7R.js +15 -0
- package/dist/chunk-TPJDOB7R.js.map +1 -0
- package/dist/chunk-VKZZY2QD.js +103 -0
- package/dist/chunk-VKZZY2QD.js.map +1 -0
- package/dist/chunk-W5FX4TU3.js +102 -0
- package/dist/chunk-W5FX4TU3.js.map +1 -0
- package/dist/chunk-W5ILLSPK.js +107 -0
- package/dist/chunk-W5ILLSPK.js.map +1 -0
- package/dist/chunk-WBHFVBSK.js +25 -0
- package/dist/chunk-WBHFVBSK.js.map +1 -0
- package/dist/chunk-WNUFGMS7.js +113 -0
- package/dist/chunk-WNUFGMS7.js.map +1 -0
- package/dist/chunk-WVTIKOII.js +15 -0
- package/dist/chunk-WVTIKOII.js.map +1 -0
- package/dist/chunk-XDDALY4C.js +166 -0
- package/dist/chunk-XDDALY4C.js.map +1 -0
- package/dist/chunk-XLLYNNC6.js +89 -0
- package/dist/chunk-XLLYNNC6.js.map +1 -0
- package/dist/context-BgYUymEO.d.ts +163 -0
- package/dist/credits.d.ts +42 -0
- package/dist/credits.js +21 -0
- package/dist/credits.js.map +1 -0
- package/dist/earnings.d.ts +29 -0
- package/dist/earnings.js +22 -0
- package/dist/earnings.js.map +1 -0
- package/dist/frame-I7_xYGy5.d.ts +45 -0
- package/dist/full-S2MBPEEP.js +11 -0
- package/dist/full-S2MBPEEP.js.map +1 -0
- package/dist/funnel-QU5ZPC52.js +13 -0
- package/dist/funnel-QU5ZPC52.js.map +1 -0
- package/dist/funnel.d.ts +26 -0
- package/dist/funnel.js +13 -0
- package/dist/funnel.js.map +1 -0
- package/dist/gauge.d.ts +38 -0
- package/dist/gauge.js +13 -0
- package/dist/gauge.js.map +1 -0
- package/dist/geo.d.ts +37 -0
- package/dist/geo.js +13 -0
- package/dist/geo.js.map +1 -0
- package/dist/globe.d.ts +36 -0
- package/dist/globe.js +12 -0
- package/dist/globe.js.map +1 -0
- package/dist/goal.d.ts +26 -0
- package/dist/goal.js +17 -0
- package/dist/goal.js.map +1 -0
- package/dist/heatmap-JWQOKUGM.js +13 -0
- package/dist/heatmap-JWQOKUGM.js.map +1 -0
- package/dist/heatmap.d.ts +47 -0
- package/dist/heatmap.js +15 -0
- package/dist/heatmap.js.map +1 -0
- package/dist/host-_F8RgiIz.d.ts +15 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +148 -0
- package/dist/index.js.map +1 -0
- package/dist/labels-DE_743fQ.d.ts +72 -0
- package/dist/latency.d.ts +33 -0
- package/dist/latency.js +24 -0
- package/dist/latency.js.map +1 -0
- package/dist/line.d.ts +25 -0
- package/dist/line.js +19 -0
- package/dist/line.js.map +1 -0
- package/dist/native.d.ts +494 -0
- package/dist/native.js +1244 -0
- package/dist/native.js.map +1 -0
- package/dist/pie.d.ts +37 -0
- package/dist/pie.js +16 -0
- package/dist/pie.js.map +1 -0
- package/dist/provider.d.ts +73 -0
- package/dist/provider.js +24 -0
- package/dist/provider.js.map +1 -0
- package/dist/radar-75GRJ2IK.js +13 -0
- package/dist/radar-75GRJ2IK.js.map +1 -0
- package/dist/radar.d.ts +22 -0
- package/dist/radar.js +13 -0
- package/dist/radar.js.map +1 -0
- package/dist/sankey-XQTX2EG6.js +13 -0
- package/dist/sankey-XQTX2EG6.js.map +1 -0
- package/dist/sankey.d.ts +28 -0
- package/dist/sankey.js +13 -0
- package/dist/sankey.js.map +1 -0
- package/dist/scatter-XSNG4OKD.js +13 -0
- package/dist/scatter-XSNG4OKD.js.map +1 -0
- package/dist/scatter.d.ts +41 -0
- package/dist/scatter.js +15 -0
- package/dist/scatter.js.map +1 -0
- package/dist/sparkline.d.ts +26 -0
- package/dist/sparkline.js +16 -0
- package/dist/sparkline.js.map +1 -0
- package/dist/svg-BJUHYX3B.js +14 -0
- package/dist/svg-BJUHYX3B.js.map +1 -0
- package/dist/throughput.d.ts +37 -0
- package/dist/throughput.js +24 -0
- package/dist/throughput.js.map +1 -0
- package/dist/ticker.d.ts +38 -0
- package/dist/ticker.js +22 -0
- package/dist/ticker.js.map +1 -0
- package/dist/treemap-OMGGGB5U.js +13 -0
- package/dist/treemap-OMGGGB5U.js.map +1 -0
- package/dist/treemap.d.ts +24 -0
- package/dist/treemap.js +14 -0
- package/dist/treemap.js.map +1 -0
- package/dist/world-110m-DVFWXS42.js +18 -0
- package/dist/world-110m-DVFWXS42.js.map +1 -0
- package/package.json +614 -3
- package/registry/area-chart.json +785 -0
- package/registry/bar-chart.json +784 -0
- package/registry/calendar-heatmap.json +460 -0
- package/registry/candlestick.json +553 -0
- package/registry/chart.json +441 -0
- package/registry/charts-provider.json +191 -0
- package/registry/credit-usage.json +473 -0
- package/registry/earnings-chart.json +703 -0
- package/registry/examples/area-chart/credits-usage.d.ts +4 -0
- package/registry/examples/area-chart/credits-usage.js +38 -0
- package/registry/examples/area-chart/credits-usage.tsx +32 -0
- package/registry/examples/area-chart/native/credits-usage.d.ts +4 -0
- package/registry/examples/area-chart/native/credits-usage.dark.png +0 -0
- package/registry/examples/area-chart/native/credits-usage.js +33 -0
- package/registry/examples/area-chart/native/credits-usage.light.png +0 -0
- package/registry/examples/area-chart/native/credits-usage.tsx +27 -0
- package/registry/examples/area-chart/storage.d.ts +4 -0
- package/registry/examples/area-chart/storage.js +27 -0
- package/registry/examples/area-chart/storage.tsx +21 -0
- package/registry/examples/bar-chart/jobs-by-status.d.ts +4 -0
- package/registry/examples/bar-chart/jobs-by-status.js +37 -0
- package/registry/examples/bar-chart/jobs-by-status.tsx +31 -0
- package/registry/examples/bar-chart/native/jobs-by-status.d.ts +4 -0
- package/registry/examples/bar-chart/native/jobs-by-status.dark.png +0 -0
- package/registry/examples/bar-chart/native/jobs-by-status.js +32 -0
- package/registry/examples/bar-chart/native/jobs-by-status.light.png +0 -0
- package/registry/examples/bar-chart/native/jobs-by-status.tsx +26 -0
- package/registry/examples/bar-chart/plans-by-quarter.d.ts +4 -0
- package/registry/examples/bar-chart/plans-by-quarter.js +31 -0
- package/registry/examples/bar-chart/plans-by-quarter.tsx +26 -0
- package/registry/examples/bar-chart/top-supporters.d.ts +4 -0
- package/registry/examples/bar-chart/top-supporters.js +32 -0
- package/registry/examples/bar-chart/top-supporters.tsx +27 -0
- package/registry/examples/calendar-heatmap/publishing.d.ts +4 -0
- package/registry/examples/calendar-heatmap/publishing.js +28 -0
- package/registry/examples/calendar-heatmap/publishing.tsx +23 -0
- package/registry/examples/candlestick/auction-bids.d.ts +4 -0
- package/registry/examples/candlestick/auction-bids.js +37 -0
- package/registry/examples/candlestick/auction-bids.tsx +32 -0
- package/registry/examples/chart/polar-uploads.d.ts +4 -0
- package/registry/examples/chart/polar-uploads.js +34 -0
- package/registry/examples/chart/polar-uploads.tsx +30 -0
- package/registry/examples/charts-provider/french-orazaka.d.ts +4 -0
- package/registry/examples/charts-provider/french-orazaka.js +26 -0
- package/registry/examples/charts-provider/french-orazaka.tsx +22 -0
- package/registry/examples/charts-provider/native/french-orazaka.d.ts +4 -0
- package/registry/examples/charts-provider/native/french-orazaka.dark.png +0 -0
- package/registry/examples/charts-provider/native/french-orazaka.js +17 -0
- package/registry/examples/charts-provider/native/french-orazaka.light.png +0 -0
- package/registry/examples/charts-provider/native/french-orazaka.tsx +17 -0
- package/registry/examples/credit-usage/monthly-credits.d.ts +4 -0
- package/registry/examples/credit-usage/monthly-credits.js +24 -0
- package/registry/examples/credit-usage/monthly-credits.tsx +19 -0
- package/registry/examples/credit-usage/native/monthly-credits.d.ts +4 -0
- package/registry/examples/credit-usage/native/monthly-credits.dark.png +0 -0
- package/registry/examples/credit-usage/native/monthly-credits.js +23 -0
- package/registry/examples/credit-usage/native/monthly-credits.light.png +0 -0
- package/registry/examples/credit-usage/native/monthly-credits.tsx +18 -0
- package/registry/examples/credit-usage/storage-plan.d.ts +4 -0
- package/registry/examples/credit-usage/storage-plan.js +21 -0
- package/registry/examples/credit-usage/storage-plan.tsx +15 -0
- package/registry/examples/earnings-chart/creator-month.d.ts +4 -0
- package/registry/examples/earnings-chart/creator-month.js +29 -0
- package/registry/examples/earnings-chart/creator-month.tsx +24 -0
- package/registry/examples/earnings-chart/gross-and-net.d.ts +4 -0
- package/registry/examples/earnings-chart/gross-and-net.js +29 -0
- package/registry/examples/earnings-chart/gross-and-net.tsx +24 -0
- package/registry/examples/earnings-chart/native/creator-month.d.ts +4 -0
- package/registry/examples/earnings-chart/native/creator-month.dark.png +0 -0
- package/registry/examples/earnings-chart/native/creator-month.js +29 -0
- package/registry/examples/earnings-chart/native/creator-month.light.png +0 -0
- package/registry/examples/earnings-chart/native/creator-month.tsx +24 -0
- package/registry/examples/funnel/signup.d.ts +4 -0
- package/registry/examples/funnel/signup.js +30 -0
- package/registry/examples/funnel/signup.tsx +24 -0
- package/registry/examples/gauge/challenge-goal.d.ts +4 -0
- package/registry/examples/gauge/challenge-goal.js +24 -0
- package/registry/examples/gauge/challenge-goal.tsx +18 -0
- package/registry/examples/gauge/credits-quota.d.ts +4 -0
- package/registry/examples/gauge/credits-quota.js +26 -0
- package/registry/examples/gauge/credits-quota.tsx +19 -0
- package/registry/examples/gauge/native/credits-quota.d.ts +4 -0
- package/registry/examples/gauge/native/credits-quota.dark.png +0 -0
- package/registry/examples/gauge/native/credits-quota.js +25 -0
- package/registry/examples/gauge/native/credits-quota.light.png +0 -0
- package/registry/examples/gauge/native/credits-quota.tsx +18 -0
- package/registry/examples/geo-map/viewers.d.ts +4 -0
- package/registry/examples/geo-map/viewers.js +43 -0
- package/registry/examples/geo-map/viewers.tsx +29 -0
- package/registry/examples/globe/deployment-regions.d.ts +4 -0
- package/registry/examples/globe/deployment-regions.js +36 -0
- package/registry/examples/globe/deployment-regions.tsx +30 -0
- package/registry/examples/goal-progress/challenge-pot.d.ts +4 -0
- package/registry/examples/goal-progress/challenge-pot.js +22 -0
- package/registry/examples/goal-progress/challenge-pot.tsx +16 -0
- package/registry/examples/goal-progress/goal-reached.d.ts +4 -0
- package/registry/examples/goal-progress/goal-reached.js +11 -0
- package/registry/examples/goal-progress/goal-reached.tsx +6 -0
- package/registry/examples/goal-progress/native/challenge-pot.d.ts +4 -0
- package/registry/examples/goal-progress/native/challenge-pot.dark.png +0 -0
- package/registry/examples/goal-progress/native/challenge-pot.js +11 -0
- package/registry/examples/goal-progress/native/challenge-pot.light.png +0 -0
- package/registry/examples/goal-progress/native/challenge-pot.tsx +6 -0
- package/registry/examples/heatmap/upload-activity.d.ts +4 -0
- package/registry/examples/heatmap/upload-activity.js +30 -0
- package/registry/examples/heatmap/upload-activity.tsx +25 -0
- package/registry/examples/job-throughput/live-hours.d.ts +4 -0
- package/registry/examples/job-throughput/live-hours.js +33 -0
- package/registry/examples/job-throughput/live-hours.tsx +28 -0
- package/registry/examples/job-throughput/native/week-of-jobs.d.ts +4 -0
- package/registry/examples/job-throughput/native/week-of-jobs.dark.png +0 -0
- package/registry/examples/job-throughput/native/week-of-jobs.js +20 -0
- package/registry/examples/job-throughput/native/week-of-jobs.light.png +0 -0
- package/registry/examples/job-throughput/native/week-of-jobs.tsx +16 -0
- package/registry/examples/job-throughput/week-of-jobs.d.ts +4 -0
- package/registry/examples/job-throughput/week-of-jobs.js +20 -0
- package/registry/examples/job-throughput/week-of-jobs.tsx +16 -0
- package/registry/examples/latency-chart/by-capability.d.ts +4 -0
- package/registry/examples/latency-chart/by-capability.js +26 -0
- package/registry/examples/latency-chart/by-capability.tsx +21 -0
- package/registry/examples/latency-chart/native/by-capability.d.ts +4 -0
- package/registry/examples/latency-chart/native/by-capability.dark.png +0 -0
- package/registry/examples/latency-chart/native/by-capability.js +17 -0
- package/registry/examples/latency-chart/native/by-capability.light.png +0 -0
- package/registry/examples/latency-chart/native/by-capability.tsx +13 -0
- package/registry/examples/latency-chart/time-to-result.d.ts +4 -0
- package/registry/examples/latency-chart/time-to-result.js +27 -0
- package/registry/examples/latency-chart/time-to-result.tsx +22 -0
- package/registry/examples/line-chart/creator-earnings.d.ts +4 -0
- package/registry/examples/line-chart/creator-earnings.js +35 -0
- package/registry/examples/line-chart/creator-earnings.tsx +30 -0
- package/registry/examples/line-chart/forecast.d.ts +4 -0
- package/registry/examples/line-chart/forecast.js +36 -0
- package/registry/examples/line-chart/forecast.tsx +30 -0
- package/registry/examples/line-chart/live-jobs.d.ts +4 -0
- package/registry/examples/line-chart/live-jobs.js +21 -0
- package/registry/examples/line-chart/live-jobs.tsx +23 -0
- package/registry/examples/line-chart/native/creator-earnings.d.ts +4 -0
- package/registry/examples/line-chart/native/creator-earnings.dark.png +0 -0
- package/registry/examples/line-chart/native/creator-earnings.js +32 -0
- package/registry/examples/line-chart/native/creator-earnings.light.png +0 -0
- package/registry/examples/line-chart/native/creator-earnings.tsx +26 -0
- package/registry/examples/line-chart/states.d.ts +4 -0
- package/registry/examples/line-chart/states.js +16 -0
- package/registry/examples/line-chart/states.tsx +13 -0
- package/registry/examples/pie-chart/credit-spend.d.ts +4 -0
- package/registry/examples/pie-chart/credit-spend.js +30 -0
- package/registry/examples/pie-chart/credit-spend.tsx +24 -0
- package/registry/examples/pie-chart/native/credit-spend.d.ts +4 -0
- package/registry/examples/pie-chart/native/credit-spend.dark.png +0 -0
- package/registry/examples/pie-chart/native/credit-spend.js +17 -0
- package/registry/examples/pie-chart/native/credit-spend.light.png +0 -0
- package/registry/examples/pie-chart/native/credit-spend.tsx +12 -0
- package/registry/examples/pie-chart/storage-by-kind.d.ts +4 -0
- package/registry/examples/pie-chart/storage-by-kind.js +31 -0
- package/registry/examples/pie-chart/storage-by-kind.tsx +26 -0
- package/registry/examples/price-ticker/auction-room.d.ts +4 -0
- package/registry/examples/price-ticker/auction-room.js +21 -0
- package/registry/examples/price-ticker/auction-room.tsx +17 -0
- package/registry/examples/price-ticker/native/auction-room.d.ts +4 -0
- package/registry/examples/price-ticker/native/auction-room.dark.png +0 -0
- package/registry/examples/price-ticker/native/auction-room.js +19 -0
- package/registry/examples/price-ticker/native/auction-room.light.png +0 -0
- package/registry/examples/price-ticker/native/auction-room.tsx +15 -0
- package/registry/examples/price-ticker/no-bid-yet.d.ts +4 -0
- package/registry/examples/price-ticker/no-bid-yet.js +11 -0
- package/registry/examples/price-ticker/no-bid-yet.tsx +6 -0
- package/registry/examples/radar-chart/model-comparison.d.ts +4 -0
- package/registry/examples/radar-chart/model-comparison.js +33 -0
- package/registry/examples/radar-chart/model-comparison.tsx +28 -0
- package/registry/examples/sankey/credit-flow.d.ts +4 -0
- package/registry/examples/sankey/credit-flow.js +37 -0
- package/registry/examples/sankey/credit-flow.tsx +32 -0
- package/registry/examples/scatter-chart/watch-time.d.ts +4 -0
- package/registry/examples/scatter-chart/watch-time.js +36 -0
- package/registry/examples/scatter-chart/watch-time.tsx +31 -0
- package/registry/examples/sparkline/bars.d.ts +4 -0
- package/registry/examples/sparkline/bars.js +12 -0
- package/registry/examples/sparkline/bars.tsx +7 -0
- package/registry/examples/sparkline/native/stat-trend.d.ts +4 -0
- package/registry/examples/sparkline/native/stat-trend.dark.png +0 -0
- package/registry/examples/sparkline/native/stat-trend.js +12 -0
- package/registry/examples/sparkline/native/stat-trend.light.png +0 -0
- package/registry/examples/sparkline/native/stat-trend.tsx +7 -0
- package/registry/examples/sparkline/stat-trend.d.ts +4 -0
- package/registry/examples/sparkline/stat-trend.js +18 -0
- package/registry/examples/sparkline/stat-trend.tsx +15 -0
- package/registry/examples/sparkline/table-rows.d.ts +4 -0
- package/registry/examples/sparkline/table-rows.js +23 -0
- package/registry/examples/sparkline/table-rows.tsx +26 -0
- package/registry/examples/treemap/storage.d.ts +4 -0
- package/registry/examples/treemap/storage.js +17 -0
- package/registry/examples/treemap/storage.tsx +13 -0
- package/registry/funnel.json +487 -0
- package/registry/gauge.json +600 -0
- package/registry/geo-map.json +484 -0
- package/registry/globe.json +469 -0
- package/registry/goal-progress.json +520 -0
- package/registry/heatmap.json +531 -0
- package/registry/index.json +582 -0
- package/registry/job-throughput.json +654 -0
- package/registry/latency-chart.json +671 -0
- package/registry/line-chart.json +793 -0
- package/registry/pie-chart.json +1288 -0
- package/registry/price-ticker.json +684 -0
- package/registry/radar-chart.json +459 -0
- package/registry/sankey.json +503 -0
- package/registry/scatter-chart.json +559 -0
- package/registry/sparkline.json +563 -0
- package/registry/treemap.json +432 -0
|
@@ -0,0 +1,784 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "bar-chart",
|
|
3
|
+
"package": "@krizaka/charts",
|
|
4
|
+
"type": "chart",
|
|
5
|
+
"title": "Bar chart",
|
|
6
|
+
"summary": "Amounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.",
|
|
7
|
+
"description": "Amounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.",
|
|
8
|
+
"status": "beta",
|
|
9
|
+
"category": "charts",
|
|
10
|
+
"platforms": "both",
|
|
11
|
+
"engine": "svg",
|
|
12
|
+
"tier": "core",
|
|
13
|
+
"whenToUse": [
|
|
14
|
+
"Counts per category or per period: jobs per day by status, revenue per plan.",
|
|
15
|
+
"A ranking with long names, as horizontal bars: top supporters, busiest models.",
|
|
16
|
+
"The parts of a total per category, stacked: completed, failed and queued jobs."
|
|
17
|
+
],
|
|
18
|
+
"whenNotToUse": [
|
|
19
|
+
{
|
|
20
|
+
"when": "A continuous trend over many points.",
|
|
21
|
+
"use": "line-chart"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"when": "Two dimensions of the same measure (weekday × hour).",
|
|
25
|
+
"use": "heatmap"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"when": "Stages that lose people on the way.",
|
|
29
|
+
"use": "funnel"
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"bestPractices": [
|
|
33
|
+
"Sort a ranking by value; keep time in its own order.",
|
|
34
|
+
"Bars always start at zero: a bar's length is its value.",
|
|
35
|
+
"Stack at most four parts; give each a word in the legend, never a colour alone.",
|
|
36
|
+
"Use the status tones (`color: \"danger\"`) for statuses only, never for an ordinary series."
|
|
37
|
+
],
|
|
38
|
+
"accessibility": {
|
|
39
|
+
"keyboard": [
|
|
40
|
+
{
|
|
41
|
+
"keys": "Tab",
|
|
42
|
+
"action": "Moves the focus to the plot (one tab stop), then to the data and export buttons."
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"keys": "Arrow keys",
|
|
46
|
+
"action": "Walk the points one by one: each is announced and its tooltip shown."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"keys": "Home / End",
|
|
50
|
+
"action": "Jump to the first or the last point."
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"keys": "Esc",
|
|
54
|
+
"action": "Hides the tooltip and clears the active point."
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"keys": "Enter",
|
|
58
|
+
"action": "Selects the active bar (calls `onSelect` with its row)."
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"notes": [
|
|
62
|
+
"The plot is a group named by the title and described by a summary written from the data (extremes, trend), read before anything else.",
|
|
63
|
+
"The data table is always in the page for assistive technology; “Show data” reveals it for everyone.",
|
|
64
|
+
"Colour never carries a meaning alone: a legend from two series, direct labels, the table.",
|
|
65
|
+
"The entrance plays once, when the chart comes on screen, and never under reduced motion.",
|
|
66
|
+
"A 2 px gap separates the stacked segments, so neighbours stay apart without relying on their colours."
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
"related": [
|
|
70
|
+
"line-chart",
|
|
71
|
+
"area-chart",
|
|
72
|
+
"funnel",
|
|
73
|
+
"heatmap"
|
|
74
|
+
],
|
|
75
|
+
"source": "packages/charts/src/meta/bar-chart.ts",
|
|
76
|
+
"install": {
|
|
77
|
+
"web": "npm install @krizaka/charts",
|
|
78
|
+
"native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
|
|
79
|
+
},
|
|
80
|
+
"web": {
|
|
81
|
+
"entry": "@krizaka/charts/bar",
|
|
82
|
+
"import": "import { BarChart } from \"@krizaka/charts/bar\";",
|
|
83
|
+
"props": [
|
|
84
|
+
{
|
|
85
|
+
"component": "BarChart",
|
|
86
|
+
"description": "Compare amounts across categories: grouped, stacked or horizontal bars, each value at its tip.",
|
|
87
|
+
"props": [
|
|
88
|
+
{
|
|
89
|
+
"name": "data",
|
|
90
|
+
"type": "readonly T[]",
|
|
91
|
+
"default": null,
|
|
92
|
+
"description": "The rows, in the order of the x axis.",
|
|
93
|
+
"required": true
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "title",
|
|
97
|
+
"type": "string",
|
|
98
|
+
"default": null,
|
|
99
|
+
"description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
|
|
100
|
+
"required": true
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"name": "brand",
|
|
104
|
+
"type": "BrandId",
|
|
105
|
+
"default": null,
|
|
106
|
+
"description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
|
|
107
|
+
"required": false
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "className",
|
|
111
|
+
"type": "string",
|
|
112
|
+
"default": null,
|
|
113
|
+
"description": "A class on the figure (layout: margins, grid placement).",
|
|
114
|
+
"required": false
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"name": "dataTable",
|
|
118
|
+
"type": "boolean",
|
|
119
|
+
"default": null,
|
|
120
|
+
"description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
|
|
121
|
+
"required": false
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "description",
|
|
125
|
+
"type": "ReactNode",
|
|
126
|
+
"default": null,
|
|
127
|
+
"description": "A sentence under the title: the period, the unit, the source.",
|
|
128
|
+
"required": false
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "empty",
|
|
132
|
+
"type": "ReactNode",
|
|
133
|
+
"default": null,
|
|
134
|
+
"description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
|
|
135
|
+
"required": false
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "error",
|
|
139
|
+
"type": "ReactNode",
|
|
140
|
+
"default": null,
|
|
141
|
+
"description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
|
|
142
|
+
"required": false
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "exportable",
|
|
146
|
+
"type": "boolean | readonly ExportFormat[]",
|
|
147
|
+
"default": null,
|
|
148
|
+
"description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
|
|
149
|
+
"required": false
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"name": "format",
|
|
153
|
+
"type": "ValueFormat",
|
|
154
|
+
"default": null,
|
|
155
|
+
"description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
|
|
156
|
+
"required": false
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "height",
|
|
160
|
+
"type": "number",
|
|
161
|
+
"default": null,
|
|
162
|
+
"description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
|
|
163
|
+
"required": false
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"name": "hideTitle",
|
|
167
|
+
"type": "boolean",
|
|
168
|
+
"default": null,
|
|
169
|
+
"description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
|
|
170
|
+
"required": false
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"name": "horizontal",
|
|
174
|
+
"type": "boolean",
|
|
175
|
+
"default": null,
|
|
176
|
+
"description": "Bars grow to the right, the categories down the side: long labels, rankings.",
|
|
177
|
+
"required": false
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "id",
|
|
181
|
+
"type": "string",
|
|
182
|
+
"default": null,
|
|
183
|
+
"description": "The id of the figure.",
|
|
184
|
+
"required": false
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"name": "labels",
|
|
188
|
+
"type": "ChartLabelsInput",
|
|
189
|
+
"default": null,
|
|
190
|
+
"description": "The words, translated: the buttons, the states, the written summary.",
|
|
191
|
+
"required": false
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "legend",
|
|
195
|
+
"type": "boolean",
|
|
196
|
+
"default": null,
|
|
197
|
+
"description": "Show the legend (from two series). Default true.",
|
|
198
|
+
"required": false
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"name": "live",
|
|
202
|
+
"type": "boolean",
|
|
203
|
+
"default": null,
|
|
204
|
+
"description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
|
|
205
|
+
"required": false
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"name": "loading",
|
|
209
|
+
"type": "boolean",
|
|
210
|
+
"default": null,
|
|
211
|
+
"description": "The data is on its way: a skeleton of the chart, announced once.",
|
|
212
|
+
"required": false
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "locale",
|
|
216
|
+
"type": "Locale",
|
|
217
|
+
"default": null,
|
|
218
|
+
"description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
|
|
219
|
+
"required": false
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"name": "markers",
|
|
223
|
+
"type": "readonly Marker[]",
|
|
224
|
+
"default": null,
|
|
225
|
+
"description": "Vertical markers at a category: a launch, an incident.",
|
|
226
|
+
"required": false
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"name": "onSelect",
|
|
230
|
+
"type": "((datum: T, index: number) => void)",
|
|
231
|
+
"default": null,
|
|
232
|
+
"description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
|
|
233
|
+
"required": false
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"name": "series",
|
|
237
|
+
"type": "readonly SeriesSpec<T>[]",
|
|
238
|
+
"default": null,
|
|
239
|
+
"description": "The series to draw, each with its field and its name; the palette follows their order.",
|
|
240
|
+
"required": false
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"name": "stacked",
|
|
244
|
+
"type": "boolean",
|
|
245
|
+
"default": null,
|
|
246
|
+
"description": "Stack the series in one bar per category (a total and its parts); default: grouped side by side.",
|
|
247
|
+
"required": false
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "style",
|
|
251
|
+
"type": "CSSProperties",
|
|
252
|
+
"default": null,
|
|
253
|
+
"description": "Inline style on the figure (layout only: colours come from the tokens).",
|
|
254
|
+
"required": false
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"name": "summary",
|
|
258
|
+
"type": "\"hidden\" | \"visible\"",
|
|
259
|
+
"default": null,
|
|
260
|
+
"description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
|
|
261
|
+
"required": false
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"name": "summaryText",
|
|
265
|
+
"type": "string",
|
|
266
|
+
"default": null,
|
|
267
|
+
"description": "Your own summary instead of the generated one (still read first by screen readers).",
|
|
268
|
+
"required": false
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "thresholds",
|
|
272
|
+
"type": "readonly Threshold[]",
|
|
273
|
+
"default": null,
|
|
274
|
+
"description": "Horizontal lines at a value: a goal, a payout threshold.",
|
|
275
|
+
"required": false
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "valueLabels",
|
|
279
|
+
"type": "boolean",
|
|
280
|
+
"default": "true",
|
|
281
|
+
"description": "Write each value at the tip of its bar (one series, up to 16 bars). Default true.",
|
|
282
|
+
"required": false
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"name": "x",
|
|
286
|
+
"type": "string | ((datum: T, index: number) => unknown)",
|
|
287
|
+
"default": null,
|
|
288
|
+
"description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
|
|
289
|
+
"required": false
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
"name": "xFormat",
|
|
293
|
+
"type": "CategoryFormat",
|
|
294
|
+
"default": null,
|
|
295
|
+
"description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
|
|
296
|
+
"required": false
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "xLabel",
|
|
300
|
+
"type": "string",
|
|
301
|
+
"default": null,
|
|
302
|
+
"description": "The header of the categories in the data table (`Month`).",
|
|
303
|
+
"required": false
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "y",
|
|
307
|
+
"type": "string | ((datum: T, index: number) => number | null)",
|
|
308
|
+
"default": null,
|
|
309
|
+
"description": "A single series: its field. Use `series` for several.",
|
|
310
|
+
"required": false
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"name": "yLabel",
|
|
314
|
+
"type": "string",
|
|
315
|
+
"default": null,
|
|
316
|
+
"description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
|
|
317
|
+
"required": false
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"name": "zero",
|
|
321
|
+
"type": "boolean",
|
|
322
|
+
"default": null,
|
|
323
|
+
"description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
|
|
324
|
+
"required": false
|
|
325
|
+
}
|
|
326
|
+
]
|
|
327
|
+
}
|
|
328
|
+
],
|
|
329
|
+
"examples": [
|
|
330
|
+
{
|
|
331
|
+
"name": "jobs-by-status",
|
|
332
|
+
"title": "Jobs by status",
|
|
333
|
+
"description": "A week of Orazaka jobs per day, stacked by status in the status tones.",
|
|
334
|
+
"path": "examples/bar-chart/jobs-by-status.tsx",
|
|
335
|
+
"module": "@krizaka/charts/registry/examples/bar-chart/jobs-by-status",
|
|
336
|
+
"code": "import { BarChart } from \"@krizaka/charts/bar\";\n\nconst days = [\n { day: \"2026-10-05\", completed: 1_240, failed: 38, queued: 12 },\n { day: \"2026-10-06\", completed: 1_612, failed: 41, queued: 20 },\n { day: \"2026-10-07\", completed: 1_505, failed: 95, queued: 31 },\n { day: \"2026-10-08\", completed: 1_788, failed: 27, queued: 18 },\n { day: \"2026-10-09\", completed: 1_934, failed: 33, queued: 44 },\n { day: \"2026-10-10\", completed: 1_102, failed: 19, queued: 9 },\n { day: \"2026-10-11\", completed: 986, failed: 12, queued: 63 },\n];\n\nexport default function JobsByStatus() {\n return (\n <BarChart\n title=\"Jobs per day, by status\"\n description=\"Orazaka · all workspaces\"\n data={days}\n x=\"day\"\n xFormat=\"day\"\n series={[\n { key: \"completed\", label: \"Completed\", color: \"success\" },\n { key: \"failed\", label: \"Failed\", color: \"danger\" },\n { key: \"queued\", label: \"Queued\", color: \"neutral\" },\n ]}\n format=\"integer\"\n stacked\n exportable={[\"csv\", \"png\"]}\n />\n );\n}\n"
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "top-supporters",
|
|
340
|
+
"title": "Ranking",
|
|
341
|
+
"description": "Horizontal bars: a creator's top supporters, the value at each tip.",
|
|
342
|
+
"path": "examples/bar-chart/top-supporters.tsx",
|
|
343
|
+
"module": "@krizaka/charts/registry/examples/bar-chart/top-supporters",
|
|
344
|
+
"code": "import { BarChart } from \"@krizaka/charts/bar\";\n\n// Cents, sorted by amount: a ranking reads top to bottom.\nconst supporters = [\n { name: \"Léa Fontaine\", total: 48_500 },\n { name: \"Marcus Oyelaran\", total: 36_200 },\n { name: \"Hana Watanabe\", total: 29_900 },\n { name: \"Tomás Ferreira-Lindqvist\", total: 21_400 },\n { name: \"Eric Dubois\", total: 17_800 },\n { name: \"Amira Haddad\", total: 12_050 },\n];\n\nexport default function TopSupporters() {\n return (\n <BarChart\n title=\"Top supporters this quarter\"\n data={supporters}\n x=\"name\"\n xLabel=\"Supporter\"\n y=\"total\"\n yLabel=\"Total\"\n format={{ style: \"money\", currency: \"EUR\" }}\n horizontal\n height={260}\n />\n );\n}\n"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "plans-by-quarter",
|
|
348
|
+
"title": "Grouped",
|
|
349
|
+
"description": "Revenue per plan, grouped by quarter.",
|
|
350
|
+
"path": "examples/bar-chart/plans-by-quarter.tsx",
|
|
351
|
+
"module": "@krizaka/charts/registry/examples/bar-chart/plans-by-quarter",
|
|
352
|
+
"code": "import { BarChart } from \"@krizaka/charts/bar\";\n\n// Thousands of euros per quarter.\nconst quarters = [\n { quarter: \"Q4 2025\", starter: 18, pro: 42, studio: 26 },\n { quarter: \"Q1 2026\", starter: 21, pro: 51, studio: 34 },\n { quarter: \"Q2 2026\", starter: 24, pro: 58, studio: 47 },\n { quarter: \"Q3 2026\", starter: 22, pro: 66, studio: 61 },\n];\n\nexport default function PlansByQuarter() {\n return (\n <BarChart\n title=\"Revenue per plan (k€)\"\n data={quarters}\n x=\"quarter\"\n xLabel=\"Quarter\"\n series={[\n { key: \"starter\", label: \"Starter\" },\n { key: \"pro\", label: \"Pro\" },\n { key: \"studio\", label: \"Studio\" },\n ]}\n format=\"integer\"\n />\n );\n}\n"
|
|
353
|
+
}
|
|
354
|
+
]
|
|
355
|
+
},
|
|
356
|
+
"native": {
|
|
357
|
+
"entry": "@krizaka/charts/native",
|
|
358
|
+
"import": "import { BarChart } from \"@krizaka/charts/native\";",
|
|
359
|
+
"differences": [
|
|
360
|
+
"Vertical bars only (no `horizontal`), no value labels at the tips.",
|
|
361
|
+
"No data table or export: swipe up and down on the chart to hear each category."
|
|
362
|
+
],
|
|
363
|
+
"props": [
|
|
364
|
+
{
|
|
365
|
+
"component": "BarChart",
|
|
366
|
+
"description": "Amounts across categories (React Native): grouped or `stacked` bars.",
|
|
367
|
+
"props": [
|
|
368
|
+
{
|
|
369
|
+
"name": "data",
|
|
370
|
+
"type": "readonly T[]",
|
|
371
|
+
"default": null,
|
|
372
|
+
"description": "The rows, in the order of the x axis.",
|
|
373
|
+
"required": true
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
"name": "title",
|
|
377
|
+
"type": "string",
|
|
378
|
+
"default": null,
|
|
379
|
+
"description": "What the chart shows: its heading and accessible name.",
|
|
380
|
+
"required": true
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "brand",
|
|
384
|
+
"type": "BrandId",
|
|
385
|
+
"default": null,
|
|
386
|
+
"description": "The brand whose palette leads. Default Krizaka.",
|
|
387
|
+
"required": false
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "empty",
|
|
391
|
+
"type": "ReactNode",
|
|
392
|
+
"default": null,
|
|
393
|
+
"description": "Shown instead of the plot when there is nothing to draw. Default: the `empty` label.",
|
|
394
|
+
"required": false
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
"name": "format",
|
|
398
|
+
"type": "ValueFormat",
|
|
399
|
+
"default": null,
|
|
400
|
+
"description": "How the values are written.",
|
|
401
|
+
"required": false
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"name": "height",
|
|
405
|
+
"type": "number",
|
|
406
|
+
"default": null,
|
|
407
|
+
"description": "The plot's height.",
|
|
408
|
+
"required": false
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "hideTitle",
|
|
412
|
+
"type": "boolean",
|
|
413
|
+
"default": null,
|
|
414
|
+
"description": "Hide the heading (it stays the accessible name).",
|
|
415
|
+
"required": false
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"name": "labels",
|
|
419
|
+
"type": "ChartLabelsInput",
|
|
420
|
+
"default": null,
|
|
421
|
+
"description": "The words: the readout, the summary.",
|
|
422
|
+
"required": false
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"name": "loading",
|
|
426
|
+
"type": "boolean",
|
|
427
|
+
"default": null,
|
|
428
|
+
"description": "The data is on its way.",
|
|
429
|
+
"required": false
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"name": "locale",
|
|
433
|
+
"type": "Locale",
|
|
434
|
+
"default": null,
|
|
435
|
+
"description": "The locale of every figure and date. Default `\"en-US\"`.",
|
|
436
|
+
"required": false
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"name": "scheme",
|
|
440
|
+
"type": "Mode",
|
|
441
|
+
"default": null,
|
|
442
|
+
"description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
|
|
443
|
+
"required": false
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"name": "series",
|
|
447
|
+
"type": "readonly SeriesSpec<T>[]",
|
|
448
|
+
"default": null,
|
|
449
|
+
"description": "The series, each with its field and name.",
|
|
450
|
+
"required": false
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"name": "stacked",
|
|
454
|
+
"type": "boolean",
|
|
455
|
+
"default": null,
|
|
456
|
+
"description": "Stack the series in one bar per category; default: grouped side by side.",
|
|
457
|
+
"required": false
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"name": "style",
|
|
461
|
+
"type": "ViewStyle",
|
|
462
|
+
"default": null,
|
|
463
|
+
"description": "The style of the chart's container (layout only: colours come from the theme).",
|
|
464
|
+
"required": false
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"name": "theme",
|
|
468
|
+
"type": "Partial<ChartTheme>",
|
|
469
|
+
"default": null,
|
|
470
|
+
"description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
|
|
471
|
+
"required": false
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
"name": "thresholds",
|
|
475
|
+
"type": "readonly Threshold[]",
|
|
476
|
+
"default": null,
|
|
477
|
+
"description": "Horizontal lines at a value.",
|
|
478
|
+
"required": false
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
"name": "x",
|
|
482
|
+
"type": "string | ((datum: T, index: number) => unknown)",
|
|
483
|
+
"default": null,
|
|
484
|
+
"description": "The field (or function) of the category.",
|
|
485
|
+
"required": false
|
|
486
|
+
},
|
|
487
|
+
{
|
|
488
|
+
"name": "xFormat",
|
|
489
|
+
"type": "CategoryFormat",
|
|
490
|
+
"default": null,
|
|
491
|
+
"description": "How the categories are written.",
|
|
492
|
+
"required": false
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"name": "y",
|
|
496
|
+
"type": "string | ((datum: T, index: number) => number | null)",
|
|
497
|
+
"default": null,
|
|
498
|
+
"description": "A single series: its field.",
|
|
499
|
+
"required": false
|
|
500
|
+
},
|
|
501
|
+
{
|
|
502
|
+
"name": "yLabel",
|
|
503
|
+
"type": "string",
|
|
504
|
+
"default": null,
|
|
505
|
+
"description": "The name of the single `y` series.",
|
|
506
|
+
"required": false
|
|
507
|
+
}
|
|
508
|
+
]
|
|
509
|
+
}
|
|
510
|
+
],
|
|
511
|
+
"examples": [
|
|
512
|
+
{
|
|
513
|
+
"name": "jobs-by-status",
|
|
514
|
+
"title": "Jobs by status",
|
|
515
|
+
"description": "A week of jobs, stacked by status.",
|
|
516
|
+
"path": "examples/bar-chart/native/jobs-by-status.tsx",
|
|
517
|
+
"module": "@krizaka/charts/registry/examples/bar-chart/native/jobs-by-status",
|
|
518
|
+
"code": "import { BarChart } from \"@krizaka/charts/native\";\n\nconst days = [\n { day: \"2026-10-07\", completed: 1_505, failed: 95 },\n { day: \"2026-10-08\", completed: 1_788, failed: 27 },\n { day: \"2026-10-09\", completed: 1_934, failed: 33 },\n { day: \"2026-10-10\", completed: 1_102, failed: 19 },\n { day: \"2026-10-11\", completed: 986, failed: 12 },\n];\n\nexport default function JobsByStatus() {\n return (\n <BarChart\n title=\"Jobs per day\"\n data={days}\n x=\"day\"\n xFormat=\"day\"\n series={[\n { key: \"completed\", label: \"Completed\", color: \"success\" },\n { key: \"failed\", label: \"Failed\", color: \"danger\" },\n ]}\n format=\"compact\"\n stacked\n />\n );\n}\n",
|
|
519
|
+
"screenshots": {
|
|
520
|
+
"dark": "examples/bar-chart/native/jobs-by-status.dark.png",
|
|
521
|
+
"light": "examples/bar-chart/native/jobs-by-status.light.png"
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
]
|
|
525
|
+
},
|
|
526
|
+
"files": [],
|
|
527
|
+
"dependencies": [
|
|
528
|
+
"@krizaka/intl@workspace:^",
|
|
529
|
+
"d3-geo@^3.1.1",
|
|
530
|
+
"echarts@^6.1.0",
|
|
531
|
+
"topojson-client@^3.1.0"
|
|
532
|
+
],
|
|
533
|
+
"registryDependencies": [],
|
|
534
|
+
"demo": {
|
|
535
|
+
"path": "examples/bar-chart/jobs-by-status.tsx",
|
|
536
|
+
"content": "import { BarChart } from \"@krizaka/charts/bar\";\n\nconst days = [\n { day: \"2026-10-05\", completed: 1_240, failed: 38, queued: 12 },\n { day: \"2026-10-06\", completed: 1_612, failed: 41, queued: 20 },\n { day: \"2026-10-07\", completed: 1_505, failed: 95, queued: 31 },\n { day: \"2026-10-08\", completed: 1_788, failed: 27, queued: 18 },\n { day: \"2026-10-09\", completed: 1_934, failed: 33, queued: 44 },\n { day: \"2026-10-10\", completed: 1_102, failed: 19, queued: 9 },\n { day: \"2026-10-11\", completed: 986, failed: 12, queued: 63 },\n];\n\nexport default function JobsByStatus() {\n return (\n <BarChart\n title=\"Jobs per day, by status\"\n description=\"Orazaka · all workspaces\"\n data={days}\n x=\"day\"\n xFormat=\"day\"\n series={[\n { key: \"completed\", label: \"Completed\", color: \"success\" },\n { key: \"failed\", label: \"Failed\", color: \"danger\" },\n { key: \"queued\", label: \"Queued\", color: \"neutral\" },\n ]}\n format=\"integer\"\n stacked\n exportable={[\"csv\", \"png\"]}\n />\n );\n}\n"
|
|
537
|
+
},
|
|
538
|
+
"props": [
|
|
539
|
+
{
|
|
540
|
+
"component": "BarChart",
|
|
541
|
+
"description": "Compare amounts across categories: grouped, stacked or horizontal bars, each value at its tip.",
|
|
542
|
+
"props": [
|
|
543
|
+
{
|
|
544
|
+
"name": "data",
|
|
545
|
+
"type": "readonly T[]",
|
|
546
|
+
"default": null,
|
|
547
|
+
"description": "The rows, in the order of the x axis.",
|
|
548
|
+
"required": true
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"name": "title",
|
|
552
|
+
"type": "string",
|
|
553
|
+
"default": null,
|
|
554
|
+
"description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
|
|
555
|
+
"required": true
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"name": "brand",
|
|
559
|
+
"type": "BrandId",
|
|
560
|
+
"default": null,
|
|
561
|
+
"description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
|
|
562
|
+
"required": false
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"name": "className",
|
|
566
|
+
"type": "string",
|
|
567
|
+
"default": null,
|
|
568
|
+
"description": "A class on the figure (layout: margins, grid placement).",
|
|
569
|
+
"required": false
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"name": "dataTable",
|
|
573
|
+
"type": "boolean",
|
|
574
|
+
"default": null,
|
|
575
|
+
"description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
|
|
576
|
+
"required": false
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"name": "description",
|
|
580
|
+
"type": "ReactNode",
|
|
581
|
+
"default": null,
|
|
582
|
+
"description": "A sentence under the title: the period, the unit, the source.",
|
|
583
|
+
"required": false
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"name": "empty",
|
|
587
|
+
"type": "ReactNode",
|
|
588
|
+
"default": null,
|
|
589
|
+
"description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
|
|
590
|
+
"required": false
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"name": "error",
|
|
594
|
+
"type": "ReactNode",
|
|
595
|
+
"default": null,
|
|
596
|
+
"description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
|
|
597
|
+
"required": false
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"name": "exportable",
|
|
601
|
+
"type": "boolean | readonly ExportFormat[]",
|
|
602
|
+
"default": null,
|
|
603
|
+
"description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
|
|
604
|
+
"required": false
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"name": "format",
|
|
608
|
+
"type": "ValueFormat",
|
|
609
|
+
"default": null,
|
|
610
|
+
"description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
|
|
611
|
+
"required": false
|
|
612
|
+
},
|
|
613
|
+
{
|
|
614
|
+
"name": "height",
|
|
615
|
+
"type": "number",
|
|
616
|
+
"default": null,
|
|
617
|
+
"description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
|
|
618
|
+
"required": false
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
"name": "hideTitle",
|
|
622
|
+
"type": "boolean",
|
|
623
|
+
"default": null,
|
|
624
|
+
"description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
|
|
625
|
+
"required": false
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"name": "horizontal",
|
|
629
|
+
"type": "boolean",
|
|
630
|
+
"default": null,
|
|
631
|
+
"description": "Bars grow to the right, the categories down the side: long labels, rankings.",
|
|
632
|
+
"required": false
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"name": "id",
|
|
636
|
+
"type": "string",
|
|
637
|
+
"default": null,
|
|
638
|
+
"description": "The id of the figure.",
|
|
639
|
+
"required": false
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "labels",
|
|
643
|
+
"type": "ChartLabelsInput",
|
|
644
|
+
"default": null,
|
|
645
|
+
"description": "The words, translated: the buttons, the states, the written summary.",
|
|
646
|
+
"required": false
|
|
647
|
+
},
|
|
648
|
+
{
|
|
649
|
+
"name": "legend",
|
|
650
|
+
"type": "boolean",
|
|
651
|
+
"default": null,
|
|
652
|
+
"description": "Show the legend (from two series). Default true.",
|
|
653
|
+
"required": false
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"name": "live",
|
|
657
|
+
"type": "boolean",
|
|
658
|
+
"default": null,
|
|
659
|
+
"description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
|
|
660
|
+
"required": false
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "loading",
|
|
664
|
+
"type": "boolean",
|
|
665
|
+
"default": null,
|
|
666
|
+
"description": "The data is on its way: a skeleton of the chart, announced once.",
|
|
667
|
+
"required": false
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
"name": "locale",
|
|
671
|
+
"type": "Locale",
|
|
672
|
+
"default": null,
|
|
673
|
+
"description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
|
|
674
|
+
"required": false
|
|
675
|
+
},
|
|
676
|
+
{
|
|
677
|
+
"name": "markers",
|
|
678
|
+
"type": "readonly Marker[]",
|
|
679
|
+
"default": null,
|
|
680
|
+
"description": "Vertical markers at a category: a launch, an incident.",
|
|
681
|
+
"required": false
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "onSelect",
|
|
685
|
+
"type": "((datum: T, index: number) => void)",
|
|
686
|
+
"default": null,
|
|
687
|
+
"description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
|
|
688
|
+
"required": false
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "series",
|
|
692
|
+
"type": "readonly SeriesSpec<T>[]",
|
|
693
|
+
"default": null,
|
|
694
|
+
"description": "The series to draw, each with its field and its name; the palette follows their order.",
|
|
695
|
+
"required": false
|
|
696
|
+
},
|
|
697
|
+
{
|
|
698
|
+
"name": "stacked",
|
|
699
|
+
"type": "boolean",
|
|
700
|
+
"default": null,
|
|
701
|
+
"description": "Stack the series in one bar per category (a total and its parts); default: grouped side by side.",
|
|
702
|
+
"required": false
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
"name": "style",
|
|
706
|
+
"type": "CSSProperties",
|
|
707
|
+
"default": null,
|
|
708
|
+
"description": "Inline style on the figure (layout only: colours come from the tokens).",
|
|
709
|
+
"required": false
|
|
710
|
+
},
|
|
711
|
+
{
|
|
712
|
+
"name": "summary",
|
|
713
|
+
"type": "\"hidden\" | \"visible\"",
|
|
714
|
+
"default": null,
|
|
715
|
+
"description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
|
|
716
|
+
"required": false
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"name": "summaryText",
|
|
720
|
+
"type": "string",
|
|
721
|
+
"default": null,
|
|
722
|
+
"description": "Your own summary instead of the generated one (still read first by screen readers).",
|
|
723
|
+
"required": false
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"name": "thresholds",
|
|
727
|
+
"type": "readonly Threshold[]",
|
|
728
|
+
"default": null,
|
|
729
|
+
"description": "Horizontal lines at a value: a goal, a payout threshold.",
|
|
730
|
+
"required": false
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
"name": "valueLabels",
|
|
734
|
+
"type": "boolean",
|
|
735
|
+
"default": "true",
|
|
736
|
+
"description": "Write each value at the tip of its bar (one series, up to 16 bars). Default true.",
|
|
737
|
+
"required": false
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
"name": "x",
|
|
741
|
+
"type": "string | ((datum: T, index: number) => unknown)",
|
|
742
|
+
"default": null,
|
|
743
|
+
"description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
|
|
744
|
+
"required": false
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
"name": "xFormat",
|
|
748
|
+
"type": "CategoryFormat",
|
|
749
|
+
"default": null,
|
|
750
|
+
"description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
|
|
751
|
+
"required": false
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"name": "xLabel",
|
|
755
|
+
"type": "string",
|
|
756
|
+
"default": null,
|
|
757
|
+
"description": "The header of the categories in the data table (`Month`).",
|
|
758
|
+
"required": false
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "y",
|
|
762
|
+
"type": "string | ((datum: T, index: number) => number | null)",
|
|
763
|
+
"default": null,
|
|
764
|
+
"description": "A single series: its field. Use `series` for several.",
|
|
765
|
+
"required": false
|
|
766
|
+
},
|
|
767
|
+
{
|
|
768
|
+
"name": "yLabel",
|
|
769
|
+
"type": "string",
|
|
770
|
+
"default": null,
|
|
771
|
+
"description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
|
|
772
|
+
"required": false
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"name": "zero",
|
|
776
|
+
"type": "boolean",
|
|
777
|
+
"default": null,
|
|
778
|
+
"description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
|
|
779
|
+
"required": false
|
|
780
|
+
}
|
|
781
|
+
]
|
|
782
|
+
}
|
|
783
|
+
]
|
|
784
|
+
}
|