@apia/charts 2.0.7 → 2.0.9

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.
Files changed (78) hide show
  1. package/dist/index.d.ts +334 -5
  2. package/dist/index.js +1455 -3
  3. package/dist/index.js.map +1 -1
  4. package/package.json +8 -6
  5. package/dist/charts/ChartContext.js +0 -6
  6. package/dist/charts/ChartContext.js.map +0 -1
  7. package/dist/charts/ChartRenderer.d.ts +0 -17
  8. package/dist/charts/ChartRenderer.d.ts.map +0 -1
  9. package/dist/charts/ChartRenderer.js +0 -175
  10. package/dist/charts/ChartRenderer.js.map +0 -1
  11. package/dist/charts/horizontalBars/Bar.js +0 -228
  12. package/dist/charts/horizontalBars/Bar.js.map +0 -1
  13. package/dist/charts/horizontalBars/HorizontalBars.js +0 -374
  14. package/dist/charts/horizontalBars/HorizontalBars.js.map +0 -1
  15. package/dist/charts/linear/LineChart.js +0 -469
  16. package/dist/charts/linear/LineChart.js.map +0 -1
  17. package/dist/charts/linear/Node.js +0 -56
  18. package/dist/charts/linear/Node.js.map +0 -1
  19. package/dist/charts/pie/Pie.js +0 -183
  20. package/dist/charts/pie/Pie.js.map +0 -1
  21. package/dist/charts/pie/Slice.js +0 -96
  22. package/dist/charts/pie/Slice.js.map +0 -1
  23. package/dist/charts/pie/usePieAnimation.js +0 -123
  24. package/dist/charts/pie/usePieAnimation.js.map +0 -1
  25. package/dist/charts/types.d.ts +0 -188
  26. package/dist/charts/types.d.ts.map +0 -1
  27. package/dist/charts/util/ChartSelector.js +0 -36
  28. package/dist/charts/util/ChartSelector.js.map +0 -1
  29. package/dist/charts/util/ColoredLegendItem.js +0 -46
  30. package/dist/charts/util/ColoredLegendItem.js.map +0 -1
  31. package/dist/charts/util/EmptyGrid.d.ts +0 -8
  32. package/dist/charts/util/EmptyGrid.d.ts.map +0 -1
  33. package/dist/charts/util/EmptyGrid.js +0 -51
  34. package/dist/charts/util/EmptyGrid.js.map +0 -1
  35. package/dist/charts/util/LegendContainer.js +0 -54
  36. package/dist/charts/util/LegendContainer.js.map +0 -1
  37. package/dist/charts/util/NumberedLegendItem.js +0 -45
  38. package/dist/charts/util/NumberedLegendItem.js.map +0 -1
  39. package/dist/charts/util/getBarColor.js +0 -29
  40. package/dist/charts/util/getBarColor.js.map +0 -1
  41. package/dist/charts/util/parseMargin.js +0 -11
  42. package/dist/charts/util/parseMargin.js.map +0 -1
  43. package/dist/charts/util/useChartStyles.js +0 -35
  44. package/dist/charts/util/useChartStyles.js.map +0 -1
  45. package/dist/charts/verticalBars/Bar.js +0 -241
  46. package/dist/charts/verticalBars/Bar.js.map +0 -1
  47. package/dist/charts/verticalBars/VerticalBars.js +0 -394
  48. package/dist/charts/verticalBars/VerticalBars.js.map +0 -1
  49. package/dist/charts/waterfallBars/WaterfallBar.js +0 -84
  50. package/dist/charts/waterfallBars/WaterfallBar.js.map +0 -1
  51. package/dist/charts/waterfallBars/WaterfallBars.js +0 -247
  52. package/dist/charts/waterfallBars/WaterfallBars.js.map +0 -1
  53. package/dist/widgets/WidgetContainer.d.ts +0 -10
  54. package/dist/widgets/WidgetContainer.d.ts.map +0 -1
  55. package/dist/widgets/WidgetContainer.js +0 -68
  56. package/dist/widgets/WidgetContainer.js.map +0 -1
  57. package/dist/widgets/counter/Counter.js +0 -108
  58. package/dist/widgets/counter/Counter.js.map +0 -1
  59. package/dist/widgets/custom/useCustomWidget.js +0 -64
  60. package/dist/widgets/custom/useCustomWidget.js.map +0 -1
  61. package/dist/widgets/custom/util.js +0 -9
  62. package/dist/widgets/custom/util.js.map +0 -1
  63. package/dist/widgets/oxford/Oxford.js +0 -241
  64. package/dist/widgets/oxford/Oxford.js.map +0 -1
  65. package/dist/widgets/ring/Ring.js +0 -123
  66. package/dist/widgets/ring/Ring.js.map +0 -1
  67. package/dist/widgets/scale/Scale.js +0 -145
  68. package/dist/widgets/scale/Scale.js.map +0 -1
  69. package/dist/widgets/speedMeter/SpeedMeter.js +0 -187
  70. package/dist/widgets/speedMeter/SpeedMeter.js.map +0 -1
  71. package/dist/widgets/tLight/TLight.js +0 -134
  72. package/dist/widgets/tLight/TLight.js.map +0 -1
  73. package/dist/widgets/thermometer/Thermometer.js +0 -144
  74. package/dist/widgets/thermometer/Thermometer.js.map +0 -1
  75. package/dist/widgets/thermometer/util.js +0 -31
  76. package/dist/widgets/thermometer/util.js.map +0 -1
  77. package/dist/widgets/types.d.ts +0 -41
  78. package/dist/widgets/types.d.ts.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"VerticalBars.js","sources":["../../../src/charts/verticalBars/VerticalBars.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { parseMargin } from '../util/parseMargin';\nimport { scaleLinear, scaleBand, scaleLog, scaleOrdinal } from '@visx/scale';\nimport { useLayoutEffect, useMemo } from 'react';\nimport { Box, Heading } from '@apia/theme';\nimport { Grid } from '@visx/visx';\nimport { Group } from '@visx/group';\nimport { BarGroup } from '@visx/shape';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { Bar } from './Bar';\nimport { getBarColor } from '../util/getBarColor';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n columnName: string;\n [key: string]: string;\n}\n\nfunction adjustDimensions({\n width,\n height,\n maxWidth,\n}: {\n width: number;\n height: number;\n maxWidth: number;\n}) {\n if (width <= maxWidth) {\n return { width, height };\n }\n\n const ratio = width / height;\n const newWidth = maxWidth;\n const newHeight = Math.floor(newWidth / ratio);\n\n return { width: newWidth, height: newHeight };\n}\n\nconst getXValue = (d: IParsedColumn) => d.columnName;\n\nexport type TVerticalBarsEvents = { highlight: { barName: string } };\n\n/**\n * Acepta parámetro pieces que debe ser compuesto por...\n *\n * @example\n *\n * // Instanciar con solamente x\n * <Pie pieces={{x: 3}} />\n *\n * // Instanciar con x e y\n * <Pie pieces={{x: 3, y: 5}} />\n */\nconst VerticalBars = ({\n margin = { top: 20, left: 100, bottom: 24, right: 0 },\n chart,\n className,\n chartId,\n allowZoom,\n}: TChartRendererProps) => {\n const effectiveMargin = parseMargin(margin);\n if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n effectiveMargin.left = 50;\n }\n let innerWidth =\n chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n let innerHeight =\n chart.ratio.height +\n (chart.showAxisXTitle\n ? -effectiveMargin.top - effectiveMargin.bottom\n : (-effectiveMargin.top - effectiveMargin.bottom) / 2);\n if (innerWidth > chart.ratio.maxWidth) {\n const newValues = adjustDimensions({\n height: innerHeight,\n width: innerWidth,\n maxWidth: chart.ratio.maxWidth,\n });\n innerWidth = newValues.width;\n innerHeight = newValues.height;\n }\n\n const styles = useChartStyles(chart.colorSchema);\n\n const columnas = arrayOrArray(chart.dataSets?.data)\n .filter((column) => !!column.sets)\n .map((column) => {\n return {\n ...column,\n sets: column.sets,\n };\n });\n\n const xValues = arrayOrArray(columnas[0].sets).map(\n (innerCoord) => innerCoord.key,\n );\n const columnNames = columnas.map((col) => {\n return col.name;\n });\n\n const parsedData: IParsedColumn[] = xValues.map((x) => {\n const obj: IParsedColumn = columnas.reduce<IParsedColumn>(\n (acc, column) => {\n return {\n ...acc,\n [column.name]: arrayOrArray(column.sets).filter((coord) => {\n return coord.key === x;\n })[0].value,\n };\n },\n { columnName: x },\n );\n return obj;\n });\n\n const xScale = scaleBand<string>({\n range: [\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.left,\n chart.ratio.width,\n ],\n domain: parsedData.map(getXValue),\n padding: 0.2,\n });\n\n const numericXScale = scaleBand<string>({\n range: [\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.left,\n chart.ratio.width,\n ],\n domain: parsedData.map((_, i) => `${i + 1}`),\n padding: 0.2,\n });\n\n const columnGroupScale = scaleBand<string>({\n domain: columnNames,\n range: [0, xScale.bandwidth()],\n });\n\n const yScaleLog = scaleLog<number>({\n range: [\n innerHeight,\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top,\n ],\n domain: [\n 1,\n Math.max(\n ...parsedData.map((d) =>\n Math.max(...columnNames.map((key) => Number(d[key]))),\n ),\n ),\n ],\n base: 10,\n });\n\n const yScaleLine = scaleLinear<number>({\n range: [\n innerHeight,\n typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top,\n ],\n domain: [\n 0,\n Math.max(\n ...parsedData.map((d) =>\n Math.max(...columnNames.map((key) => Number(d[key]))),\n ),\n ),\n ],\n });\n\n const color = scaleOrdinal<string, string>({\n domain: columnNames,\n range: columnas.map((col) => col.color),\n });\n\n // const hideLegendsColors = arrayOrArray(chart.dataSets.data).some((data) => {\n // return arrayOrArray(data.sets).some(\n // (set) => set.color !== undefined && set.color !== '',\n // );\n // });\n\n const isLogScale = false;\n\n const yScale = useMemo(() => {\n if (!isLogScale) {\n return yScaleLine;\n }\n return yScaleLog;\n }, [isLogScale, yScaleLine, yScaleLog]);\n\n const id = useMemo(() => `VerticalBars${uniqueId()}`, []);\n useLayoutEffect(() => {\n document\n .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n .forEach((current) => {\n const box = current.getBoundingClientRect();\n if (box.width > 125) {\n // eslint-disable-next-line no-param-reassign\n current.style.width = '125px';\n // eslint-disable-next-line no-param-reassign\n current.style.overflow = 'hidden';\n // eslint-disable-next-line no-param-reassign\n current.style.textOverflow = 'ellipsis';\n // eslint-disable-next-line no-param-reassign\n current.style.whiteSpace = 'nowrap';\n }\n // eslint-disable-next-line no-param-reassign\n current.style.transformOrigin =\n (current.getAttribute('x') as string) + 'px 14px';\n // eslint-disable-next-line no-param-reassign\n current.style.transform = `rotate(25deg)`;\n });\n });\n\n const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n undefined,\n !allowZoom ?? true,\n );\n\n const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {\n const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n const dataColor =\n data.color !== '' && data.color !== undefined\n ? data.color\n : arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ).length > 0\n ? getBarColor(\n arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ),\n index,\n isSingle,\n )\n : '';\n const returnColumnsArray: TApiaChartColorDisposition[] = [];\n arrayOrArray(data.sets).forEach((set) => {\n if (set.color !== '' && set.color !== undefined) {\n returnColumnsArray.push({ ...set, columnName: data.name });\n } else {\n returnColumnsArray.push({\n ...set,\n color: dataColor,\n columnName: data.name,\n });\n }\n });\n return returnColumnsArray;\n });\n\n const colorReference: TChartReference = arrayOrArray(chart.dataSets.data).map(\n (data, index) => {\n const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n const dataColor =\n data.color !== '' && data.color !== undefined\n ? data.color\n : arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ).length > 0\n ? getBarColor(\n arrayOrArray(\n styles\n ? styles.schema\n : [\n '#7ad6f4',\n '#45bdee',\n '#28a7ea',\n '#006cbb',\n '#034698',\n '#032f64',\n ],\n ),\n index,\n isSingle,\n )\n : '';\n return {\n color: dataColor,\n title: data.name,\n };\n },\n );\n let numberReference: TChartReference = [];\n if (colorReference.length === 1) {\n numberReference = arrayOrArray(\n arrayOrArray(chart.dataSets.data)[0].sets,\n ).map((data, index) => {\n return {\n color: `${index + 1}`,\n title: data.key,\n };\n });\n }\n\n arrayOrArray(chart.dataSets.data)\n .map((data) => {\n const returnArray: { color: string; title: string }[] = [];\n arrayOrArray(data.sets).forEach((set) => {\n if (set.color !== '' && set.color !== undefined) {\n returnArray.push({\n color: set.color,\n title: data.name + ' - ' + set.key,\n });\n }\n });\n return returnArray;\n })\n .flat()\n .forEach((addRef) => colorReference.push(addRef));\n\n return (\n <>\n <Box\n ref={boxRef}\n id={id}\n className={`${className ?? ''} ${chart.title} chartBox chartContainer`}\n sx={{\n overflow: 'hidden',\n }}\n >\n <svg\n ref={elementRef}\n className={`_${chartId} chart__svg`}\n height={chart.ratio.height}\n width={chart.ratio.width}\n >\n {chart.showGrid && (\n <Grid.Grid\n xScale={xScale}\n yScale={yScale}\n left={0}\n width={chart.ratio.width}\n height={innerHeight}\n numTicksRows={10}\n numTicksColumns={10}\n top={\n (typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top) - 20\n }\n />\n )}\n <Group\n top={\n (typeof effectiveMargin === 'number'\n ? effectiveMargin\n : effectiveMargin.top) - 20\n }\n >\n <BarGroup\n data={parsedData}\n keys={columnNames}\n height={innerHeight}\n x0={getXValue}\n x0Scale={xScale}\n x1Scale={columnGroupScale}\n yScale={yScale}\n color={color}\n >\n {(barGroups) =>\n barGroups.map((barGroup) => {\n return (\n <Group\n key={`bar-group-${barGroup.index}-${barGroup.x0}`}\n left={barGroup.x0}\n >\n {barGroup.bars.map((bar) => {\n const key = `${barGroup.index}-${bar.index}-${bar.key}`;\n\n return (\n <Bar\n isSingle={barGroup.bars.length === 1}\n key={key}\n bar={bar}\n barGroup={barGroup}\n chart={chart}\n parsedData={parsedData}\n setsWithColor={setsWithColor.flat()}\n />\n );\n })}\n </Group>\n );\n })\n }\n </BarGroup>\n </Group>\n <AxisLeft\n scale={yScale}\n left={effectiveMargin.left}\n label={\n chart.chartType !== 'pie2D' && chart.showAxisYTitle\n ? chart.axisYTitle\n : ''\n }\n tickComponent={(props) => {\n let value = Number(props.formattedValue?.replace(',', ''));\n let counter = -1;\n const units = ['k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y', 'R', 'Q'];\n while (value >= 1000) {\n value = value / 1000;\n counter++;\n }\n let stringValue = `${value}`;\n if (stringValue.length > 3) {\n stringValue = stringValue.slice(0, 3);\n }\n if (stringValue.endsWith('.')) {\n stringValue = stringValue.replace('.', '');\n }\n const newValue = `${stringValue}${\n counter >= 0 ? units[counter] : ''\n }`;\n\n return (\n <>\n {chart.showAxisYTitle && (\n <text\n dx={props.dx}\n dy={props.dy}\n fill={props.fill}\n fontSize={props.fontSize}\n textAnchor={props.textAnchor}\n x={props.x}\n y={props.y}\n >\n {newValue}\n </text>\n )}\n </>\n );\n }}\n />\n <AxisBottom\n top={innerHeight}\n scale={\n colorReference.length === 1 && numberReference.length > 0\n ? numericXScale\n : xScale\n }\n label={\n chart.chartType !== 'pie2D' && chart.showAxisXTitle\n ? chart.axisXTitle\n : ''\n }\n tickLabelProps={{ display: 'none' }}\n tickLineProps={{ display: 'none' }}\n labelOffset={0}\n />\n </svg>\n </Box>\n <Box className=\"chartLegend__Wrapper\">\n {chart.showLegend && colorReference.length !== 0 && (\n <Box className=\"chart__legend__wrapper\">\n {/* TODO LABEL */}\n <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n <LegendContainer\n id={chartId}\n references={\n colorReference.length === 1 && numberReference.length > 0\n ? numberReference\n : colorReference\n }\n useNumbered={colorReference.length === 1}\n />\n </Box>\n )}\n </Box>\n </>\n );\n};\n\nexport { VerticalBars };\n"],"names":[],"mappings":"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"}
@@ -1,84 +0,0 @@
1
- import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
2
- import { Line } from '@visx/shape';
3
- import { useMemo } from 'react';
4
- import tinycolor from 'tinycolor2';
5
- import { Box } from '@apia/theme';
6
- import { ApiaUtil } from '@apia/components';
7
-
8
- const WaterfallBar = ({
9
- width,
10
- height,
11
- x,
12
- y,
13
- fill,
14
- x1,
15
- lineY,
16
- x2,
17
- stroke,
18
- strokeDashArray,
19
- textX,
20
- textY,
21
- textContent,
22
- isLast,
23
- step,
24
- columnName,
25
- chart
26
- }) => {
27
- return /* @__PURE__ */ jsxs(Fragment, { children: [
28
- /* @__PURE__ */ jsx(
29
- Box,
30
- {
31
- as: "rect",
32
- sx: useMemo(() => {
33
- return {
34
- width: `${width}px`,
35
- height: `${height}px`,
36
- x: `${x}px`,
37
- y: `${y}px`,
38
- fill: `${fill}`,
39
- "&:hover": {
40
- fill: `#${tinycolor(fill).saturate(25).toHex()}`
41
- },
42
- transition: "fill 500ms"
43
- };
44
- }, [fill, height, width, x, y]),
45
- onMouseEnter: (ev) => {
46
- if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
47
- new ApiaUtil().tooltips.open({
48
- children: /* @__PURE__ */ jsxs(Fragment, { children: [
49
- /* @__PURE__ */ jsx(
50
- "div",
51
- {
52
- style: {
53
- color: step.color
54
- },
55
- children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? columnName : chart.showLegend ? step.x : "" })
56
- }
57
- ),
58
- chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
59
- /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? step.x : "" })
60
- ] }),
61
- attachToElement: () => ev.target,
62
- attachToElementAnchorPoint: "center"
63
- });
64
- }
65
- }
66
- }
67
- ),
68
- !isLast && /* @__PURE__ */ jsx(
69
- Line,
70
- {
71
- x1,
72
- x2,
73
- y1: lineY,
74
- y2: lineY,
75
- stroke,
76
- strokeDasharray: strokeDashArray
77
- }
78
- ),
79
- chart.showValues && /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
80
- ] });
81
- };
82
-
83
- export { WaterfallBar };
84
- //# sourceMappingURL=WaterfallBar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"WaterfallBar.js","sources":["../../../src/charts/waterfallBars/WaterfallBar.tsx"],"sourcesContent":["import { Line } from '@visx/shape';\nimport { useMemo } from 'react';\nimport { TApiaChartDefinition } from '../types';\nimport tinycolor from 'tinycolor2';\nimport { Box } from '@apia/theme';\nimport { ApiaUtil } from '@apia/components';\n\nconst WaterfallBar = ({\n width,\n height,\n x,\n y,\n fill,\n x1,\n lineY,\n x2,\n stroke,\n strokeDashArray,\n textX,\n textY,\n textContent,\n isLast,\n step,\n columnName,\n chart,\n}: {\n width: number;\n height: number;\n x: string | number;\n y: string | number;\n fill: string;\n x1: string | number;\n x2: string | number;\n lineY: string | number;\n stroke: string;\n strokeDashArray: string | number;\n textX: string | number;\n textY: string | number;\n textContent: string;\n isLast: boolean;\n step: {\n x: string;\n y: string;\n start: number;\n end: number;\n color: string;\n };\n columnName: string;\n chart: TApiaChartDefinition;\n}) => {\n return (\n <>\n <Box\n as={'rect'}\n sx={useMemo(() => {\n return {\n width: `${width}px`,\n height: `${height}px`,\n x: `${x}px`,\n y: `${y}px`,\n fill: `${fill}`,\n '&:hover': {\n fill: `#${tinycolor(fill).saturate(25).toHex()}`,\n },\n transition: 'fill 500ms',\n };\n }, [fill, height, width, x, y])}\n onMouseEnter={(ev) => {\n if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n new ApiaUtil().tooltips.open({\n children: (\n <>\n <div\n style={{\n color: step.color,\n }}\n >\n <strong>\n {chart.showAxisXTitle\n ? columnName\n : chart.showLegend\n ? step.x\n : ''}\n </strong>\n </div>\n {chart.showValues && <div>{step.y}</div>}\n <div>\n {chart.showAxisXTitle && chart.showLegend ? step.x : ''}\n </div>\n </>\n ),\n attachToElement: () => ev.target as HTMLElement,\n attachToElementAnchorPoint: 'center',\n });\n }\n }}\n />\n\n {!isLast && (\n <Line\n x1={x1}\n x2={x2}\n y1={lineY}\n y2={lineY}\n stroke={stroke}\n strokeDasharray={strokeDashArray}\n />\n )}\n {chart.showValues && (\n <text textAnchor=\"middle\" x={textX} y={textY}>\n {textContent}\n </text>\n )}\n </>\n );\n};\n\nexport { WaterfallBar };\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAA;AAAA,EACA,CAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,KAAA;AAAA,EACA,EAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AACF,CAwBM,KAAA;AACJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,MAAA;AAAA,QACJ,EAAA,EAAI,QAAQ,MAAM;AAChB,UAAO,OAAA;AAAA,YACL,KAAA,EAAO,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,YACf,MAAA,EAAQ,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,YACjB,CAAA,EAAG,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,YACP,CAAA,EAAG,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,YACP,IAAA,EAAM,GAAG,IAAI,CAAA,CAAA;AAAA,YACb,SAAW,EAAA;AAAA,cACT,IAAA,EAAM,IAAI,SAAU,CAAA,IAAI,EAAE,QAAS,CAAA,EAAE,CAAE,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,aAChD;AAAA,YACA,UAAY,EAAA,YAAA;AAAA,WACd,CAAA;AAAA,WACC,CAAC,IAAA,EAAM,QAAQ,KAAO,EAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAAA,QAC9B,YAAA,EAAc,CAAC,EAAO,KAAA;AACpB,UAAA,IAAI,KAAM,CAAA,cAAA,IAAkB,KAAM,CAAA,UAAA,IAAc,MAAM,UAAY,EAAA;AAChE,YAAI,IAAA,QAAA,EAAW,CAAA,QAAA,CAAS,IAAK,CAAA;AAAA,cAC3B,0BAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,KAAO,EAAA;AAAA,sBACL,OAAO,IAAK,CAAA,KAAA;AAAA,qBACd;AAAA,oBAEA,QAAA,kBAAA,GAAA,CAAC,YACE,QAAM,EAAA,KAAA,CAAA,cAAA,GACH,aACA,KAAM,CAAA,UAAA,GACN,IAAK,CAAA,CAAA,GACL,EACN,EAAA,CAAA;AAAA,mBAAA;AAAA,iBACF;AAAA,gBACC,KAAM,CAAA,UAAA,oBAAe,GAAA,CAAA,KAAA,EAAA,EAAK,eAAK,CAAE,EAAA,CAAA;AAAA,gCAClC,GAAA,CAAC,SACE,QAAM,EAAA,KAAA,CAAA,cAAA,IAAkB,MAAM,UAAa,GAAA,IAAA,CAAK,IAAI,EACvD,EAAA,CAAA;AAAA,eACF,EAAA,CAAA;AAAA,cAEF,eAAA,EAAiB,MAAM,EAAG,CAAA,MAAA;AAAA,cAC1B,0BAA4B,EAAA,QAAA;AAAA,aAC7B,CAAA,CAAA;AAAA,WACH;AAAA,SACF;AAAA,OAAA;AAAA,KACF;AAAA,IAEC,CAAC,MACA,oBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,EAAA;AAAA,QACA,EAAI,EAAA,KAAA;AAAA,QACJ,EAAI,EAAA,KAAA;AAAA,QACJ,MAAA;AAAA,QACA,eAAiB,EAAA,eAAA;AAAA,OAAA;AAAA,KACnB;AAAA,IAED,KAAA,CAAM,UACL,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,UAAA,EAAW,UAAS,CAAG,EAAA,KAAA,EAAO,CAAG,EAAA,KAAA,EACpC,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -1,247 +0,0 @@
1
- import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
2
- import { Box, Heading } from '@apia/theme';
3
- import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
4
- import { useState, useMemo, useLayoutEffect } from 'react';
5
- import { scaleBand, scaleLinear } from '@visx/scale';
6
- import { extent } from 'd3-array';
7
- import { parseMargin } from '../util/parseMargin.js';
8
- import { Group } from '@visx/group';
9
- import { GridRows } from '@visx/grid';
10
- import { AxisLeft, AxisBottom } from '@visx/axis';
11
- import uniqueId from 'lodash-es/uniqueId';
12
- import ChartSelector from '../util/ChartSelector.js';
13
- import { WaterfallBar } from './WaterfallBar.js';
14
-
15
- const calculateWaterfallSteps = ({
16
- data,
17
- xAccessor,
18
- yAccessor,
19
- showFinal,
20
- colors
21
- }) => {
22
- let cumulativeTotal = 0;
23
- const steps = data.map((datum) => {
24
- const xValue = xAccessor(datum);
25
- const yValue = yAccessor(datum);
26
- const prevTotal = cumulativeTotal;
27
- cumulativeTotal += Number(yValue);
28
- return {
29
- x: xValue,
30
- y: yValue,
31
- start: prevTotal,
32
- end: cumulativeTotal,
33
- color: Number(yValue) > 0 ? colors.positive : colors.negative
34
- };
35
- });
36
- if (showFinal) {
37
- steps.push({
38
- x: "Total",
39
- y: cumulativeTotal,
40
- start: 0,
41
- end: cumulativeTotal,
42
- color: colors.total
43
- });
44
- }
45
- return steps;
46
- };
47
- function adjustDimensions({
48
- width,
49
- height,
50
- maxWidth
51
- }) {
52
- if (width <= maxWidth) {
53
- return { width, height };
54
- }
55
- const ratio = width / height;
56
- const newWidth = maxWidth;
57
- const newHeight = Math.floor(newWidth / ratio);
58
- return { width: newWidth, height: newHeight };
59
- }
60
- const WaterfallBars = ({
61
- margin = { top: 20, left: 100, bottom: 150, right: 70 },
62
- chart: {
63
- waterfallColors = {
64
- positive: "#49b86f",
65
- negative: "#c92e5b",
66
- total: "#434857",
67
- stepConnector: "#888d94"
68
- },
69
- ...chart
70
- },
71
- className,
72
- chartId,
73
- allowZoom
74
- }) => {
75
- console.log({ margin });
76
- const effectiveMargin = parseMargin(margin);
77
- if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
78
- effectiveMargin.left = 50;
79
- }
80
- let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
81
- let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
82
- if (innerWidth > chart.ratio.maxWidth) {
83
- const newValues = adjustDimensions({
84
- height: innerHeight,
85
- width: innerWidth,
86
- maxWidth: chart.ratio.maxWidth
87
- });
88
- innerWidth = newValues.width;
89
- innerHeight = newValues.height;
90
- }
91
- const getXValue = (d) => d.key;
92
- const getYValue = (d) => d.value;
93
- const charts = arrayOrArray(chart.dataSets?.data).filter((piece) => !!piece.sets).map((piece) => {
94
- return {
95
- ...piece,
96
- coordinate: piece.sets
97
- };
98
- });
99
- const [currentPie, setCurrentPie] = useState("0");
100
- const chartNames = charts.map((piece) => {
101
- return piece.name;
102
- });
103
- const steps = useMemo(
104
- () => calculateWaterfallSteps({
105
- data: arrayOrArray(chart.dataSets.data)[currentPie].sets,
106
- xAccessor: getXValue,
107
- yAccessor: getYValue,
108
- showFinal: chart.showTotal ?? true,
109
- colors: waterfallColors
110
- }),
111
- [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors]
112
- );
113
- const padding = 0.2;
114
- const xScale = scaleBand({
115
- domain: steps.map((step) => step.x),
116
- padding,
117
- range: [0, innerWidth]
118
- });
119
- const yDomain = useMemo(() => {
120
- const values = steps.flatMap((step) => [step.start, step.end]);
121
- const [min, max] = extent(values);
122
- return min != null && max != null ? [min - 5, max + 5] : void 0;
123
- }, [steps]);
124
- const yScale = scaleLinear({
125
- domain: yDomain,
126
- nice: true,
127
- range: [innerHeight, 0]
128
- });
129
- const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);
130
- useLayoutEffect(() => {
131
- document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
132
- const width = current.getBoundingClientRect().width;
133
- current.style.transformOrigin = current.getAttribute("x") + "px 14px";
134
- current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
135
- });
136
- });
137
- const { boxRef, elementRef } = usePanAndZoom(
138
- void 0,
139
- !allowZoom
140
- );
141
- return /* @__PURE__ */ jsxs(Fragment, { children: [
142
- /* @__PURE__ */ jsx(
143
- Box,
144
- {
145
- id,
146
- className: `${className ? className : ""} chartBox chartContainer`,
147
- ref: boxRef,
148
- children: /* @__PURE__ */ jsx(
149
- "svg",
150
- {
151
- height: chart.ratio.height,
152
- width: chart.ratio.width,
153
- ref: elementRef,
154
- children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
155
- /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
156
- steps.map((step, index) => {
157
- const x = xScale(step.x);
158
- const y = yScale(Math.max(step.start, step.end));
159
- if (x == null || y == null) {
160
- return null;
161
- }
162
- const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
163
- const isLast = index === steps.length - 1;
164
- const linePadding = 2;
165
- const x1 = x + xScale.bandwidth() + linePadding;
166
- const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
167
- const lineY = step.end < step.start ? y + barHeight : y;
168
- const labelOffset = 10;
169
- const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
170
- let currentYValue = 0;
171
- steps.filter((_, i) => {
172
- if ((chart.showTotal ?? true) && !steps[i + 1]) {
173
- return false;
174
- }
175
- return i <= index;
176
- }).forEach((step2) => {
177
- currentYValue += Number(step2.y);
178
- });
179
- return /* @__PURE__ */ jsx(
180
- WaterfallBar,
181
- {
182
- chart,
183
- columnName: chartNames[currentPie],
184
- fill: step.color,
185
- height: barHeight,
186
- isLast,
187
- lineY,
188
- step,
189
- stroke: waterfallColors.stepConnector,
190
- strokeDashArray: 2,
191
- textContent: chart.showTotal ?? true ? step.y : currentYValue,
192
- textX: x + xScale.bandwidth() / 2,
193
- textY: labelY + 5,
194
- width: xScale.bandwidth(),
195
- x,
196
- y,
197
- x1,
198
- x2
199
- },
200
- index
201
- );
202
- }),
203
- /* @__PURE__ */ jsx(
204
- AxisLeft,
205
- {
206
- label: "",
207
- scale: yScale,
208
- hideTicks: true,
209
- tickLabelProps: () => ({
210
- textAnchor: "end",
211
- verticalAnchor: "middle",
212
- display: chart.showAxisYTitle ? "auto" : "none"
213
- })
214
- }
215
- ),
216
- /* @__PURE__ */ jsx(
217
- AxisBottom,
218
- {
219
- scale: xScale,
220
- top: innerHeight,
221
- tickLabelProps: { display: "none" },
222
- tickLineProps: { display: "none" }
223
- }
224
- )
225
- ] })
226
- }
227
- )
228
- }
229
- ),
230
- /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: !chart.hideSelector && charts.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__combo__wrapper", children: [
231
- /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("lblChartSel").text }),
232
- /* @__PURE__ */ jsx(
233
- ChartSelector,
234
- {
235
- chartId,
236
- pieces: chartNames,
237
- className: "chartSelectorCombo",
238
- current: currentPie,
239
- setCurrent: setCurrentPie
240
- }
241
- )
242
- ] }) })
243
- ] });
244
- };
245
-
246
- export { WaterfallBars };
247
- //# sourceMappingURL=WaterfallBars.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"WaterfallBars.js","sources":["../../../src/charts/waterfallBars/WaterfallBars.tsx"],"sourcesContent":["import { Box, Heading } from '@apia/theme';\nimport { TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport React, { useMemo, useLayoutEffect, useState } from 'react';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { extent } from 'd3-array';\nimport { parseMargin } from '../util/parseMargin';\nimport { Group } from '@visx/group';\nimport { GridRows } from '@visx/grid';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\nimport { WaterfallBar } from './WaterfallBar';\n// import { LegendContainer } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n columnName: string;\n [key: string]: string;\n}\n\ntype TDatum = { key: string; value: string };\n\nconst calculateWaterfallSteps = ({\n data,\n xAccessor,\n yAccessor,\n showFinal,\n colors,\n}: {\n data: TDatum[];\n xAccessor: (d: TDatum) => string;\n yAccessor: (d: TDatum) => string;\n showFinal: boolean;\n colors: {\n positive: string;\n negative: string;\n total: string;\n stepConnector: string;\n };\n}) => {\n // Holds cumulative value\n let cumulativeTotal = 0;\n\n // Calculate bars for each data point\n const steps = data.map((datum) => {\n const xValue = xAccessor(datum);\n const yValue = yAccessor(datum);\n\n const prevTotal = cumulativeTotal;\n cumulativeTotal += Number(yValue);\n\n return {\n x: xValue,\n y: yValue,\n start: prevTotal,\n end: cumulativeTotal,\n color: Number(yValue) > 0 ? colors.positive : colors.negative,\n };\n });\n\n // Add final Total bar\n if (showFinal) {\n steps.push({\n x: 'Total',\n y: cumulativeTotal as unknown as string,\n start: 0,\n end: cumulativeTotal,\n color: colors.total,\n });\n }\n\n return steps;\n};\nfunction adjustDimensions({\n width,\n height,\n maxWidth,\n}: {\n width: number;\n height: number;\n maxWidth: number;\n}) {\n if (width <= maxWidth) {\n return { width, height };\n }\n\n const ratio = width / height;\n const newWidth = maxWidth;\n const newHeight = Math.floor(newWidth / ratio);\n\n return { width: newWidth, height: newHeight };\n}\nexport const WaterfallBars = ({\n margin = { top: 20, left: 100, bottom: 150, right: 70 },\n chart: {\n waterfallColors = {\n positive: '#49b86f',\n negative: '#c92e5b',\n total: '#434857',\n stepConnector: '#888d94',\n },\n ...chart\n },\n className,\n chartId,\n allowZoom,\n}: TChartRendererProps) => {\n console.log({ margin });\n\n const effectiveMargin = parseMargin(margin);\n\n if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n effectiveMargin.left = 50;\n }\n let innerWidth =\n chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n let innerHeight =\n chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;\n if (innerWidth > chart.ratio.maxWidth) {\n const newValues = adjustDimensions({\n height: innerHeight,\n width: innerWidth,\n maxWidth: chart.ratio.maxWidth,\n });\n innerWidth = newValues.width;\n innerHeight = newValues.height;\n }\n\n const getXValue = (d: TDatum) => d.key;\n const getYValue = (d: TDatum) => d.value;\n\n const charts = arrayOrArray(chart.dataSets?.data)\n .filter((piece) => !!piece.sets)\n .map((piece) => {\n return {\n ...piece,\n coordinate: piece.sets,\n };\n });\n const [currentPie, setCurrentPie] = useState('0');\n const chartNames = charts.map((piece) => {\n return piece.name;\n });\n const steps = useMemo(\n () =>\n calculateWaterfallSteps({\n data: arrayOrArray(chart.dataSets.data)[currentPie as unknown as number]\n .sets as TDatum[],\n xAccessor: getXValue,\n yAccessor: getYValue,\n showFinal: chart.showTotal ?? true,\n colors: waterfallColors,\n }),\n [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors],\n );\n\n // Build scales\n const padding = 0.2;\n\n const xScale = scaleBand({\n domain: steps.map((step) => step.x),\n padding,\n range: [0, innerWidth],\n });\n\n const yDomain = useMemo(() => {\n const values = steps.flatMap((step) => [step.start, step.end]);\n const [min, max] = extent<number>(values);\n return min != null && max != null ? [min - 5, max + 5] : undefined;\n }, [steps]);\n\n const yScale = scaleLinear({\n domain: yDomain,\n nice: true,\n range: [innerHeight, 0],\n });\n\n const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);\n useLayoutEffect(() => {\n document\n .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n .forEach((current) => {\n const width = current.getBoundingClientRect().width;\n // eslint-disable-next-line no-param-reassign\n current.style.transformOrigin =\n (current.getAttribute('x') as string) + 'px 14px';\n // eslint-disable-next-line no-param-reassign\n current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;\n });\n });\n\n const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n undefined,\n !allowZoom ?? true,\n );\n return (\n <>\n <Box\n id={id}\n className={`${className ? className : ''} chartBox chartContainer`}\n ref={boxRef}\n >\n <svg\n height={chart.ratio.height}\n width={chart.ratio.width}\n ref={elementRef}\n >\n <Group left={effectiveMargin.left} top={effectiveMargin.top}>\n <GridRows scale={yScale} width={innerWidth} strokeDasharray=\"5\" />\n {steps.map((step, index) => {\n const x = xScale(step.x);\n const y = yScale(Math.max(step.start, step.end));\n\n if (x == null || y == null) {\n return null;\n }\n\n const barHeight = Math.abs(yScale(step.start) - yScale(step.end));\n\n const isLast = index === steps.length - 1;\n const linePadding = 2;\n const x1 = x + xScale.bandwidth() + linePadding;\n const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;\n const lineY = step.end < step.start ? y + barHeight : y;\n\n const labelOffset = 10;\n const labelY =\n yScale(step.end) +\n ((step.y as unknown as number) < 0\n ? labelOffset\n : -labelOffset);\n\n let currentYValue = 0;\n steps\n .filter((_, i) => {\n if ((chart.showTotal ?? true) && !steps[i + 1]) {\n return false;\n }\n return i <= index;\n })\n .forEach((step) => {\n currentYValue += Number(step.y);\n });\n\n return (\n <WaterfallBar\n chart={chart}\n columnName={chartNames[currentPie as unknown as number]}\n fill={step.color}\n height={barHeight}\n isLast={isLast}\n key={index}\n lineY={lineY}\n step={step}\n stroke={waterfallColors.stepConnector}\n strokeDashArray={2}\n textContent={\n chart.showTotal ?? true\n ? step.y\n : (currentYValue as unknown as string)\n }\n textX={x + xScale.bandwidth() / 2}\n textY={labelY + 5}\n width={xScale.bandwidth()}\n x={x}\n y={y}\n x1={x1}\n x2={x2}\n />\n );\n })}\n <AxisLeft\n label={''}\n scale={yScale}\n hideTicks\n tickLabelProps={() => ({\n textAnchor: 'end',\n verticalAnchor: 'middle',\n display: chart.showAxisYTitle ? 'auto' : 'none',\n })}\n />\n <AxisBottom\n scale={xScale}\n top={innerHeight}\n tickLabelProps={{ display: 'none' }}\n tickLineProps={{ display: 'none' }}\n />\n </Group>\n </svg>\n </Box>\n <Box className=\"chartLegend__Wrapper\">\n {!chart.hideSelector && charts.length > 1 && (\n <Box className=\"chart__combo__wrapper\">\n {/* TODO LABEL */}\n <Heading as={'h6'}>{getLabel('lblChartSel').text}</Heading>\n <ChartSelector\n chartId={chartId}\n pieces={chartNames}\n className=\"chartSelectorCombo\"\n current={currentPie}\n setCurrent={setCurrentPie}\n />\n </Box>\n )}\n {/* {chart.showLegend && (\n <Box className=\"chart__legend__wrapper\"> */}\n {/* TODO LABEL */}\n {/* <Heading as={'h6'}>Legend</Heading>\n <LegendContainer\n id={chartId}\n avoidEvent\n references={[\n {\n title: arrayOrArray(chart.dataSets.data)[\n currentPie as unknown as number\n ].name,\n color: 'transparent',\n },\n ]}\n />\n </Box>\n )} */}\n </Box>\n </>\n );\n};\n"],"names":["step"],"mappings":"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"}
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- import { TWidgetData } from './types.js';
3
-
4
- declare const WidgetContainer: ({ data, id, }: {
5
- data: TWidgetData;
6
- id: string;
7
- }) => React.JSX.Element;
8
-
9
- export { WidgetContainer };
10
- //# sourceMappingURL=WidgetContainer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"WidgetContainer.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1,68 +0,0 @@
1
- import { jsx } from '@apia/theme/jsx-runtime';
2
- import { Scale } from './scale/Scale.js';
3
- import { SpeedMeter } from './speedMeter/SpeedMeter.js';
4
- import { TLight } from './tLight/TLight.js';
5
- import { Oxford } from './oxford/Oxford.js';
6
- import { Counter } from './counter/Counter.js';
7
- import { Ring } from './ring/Ring.js';
8
- import { Thermometer } from './thermometer/Thermometer.js';
9
- import { arrayOrArray, getIndex } from '@apia/util';
10
- import tinycolor from 'tinycolor2';
11
-
12
- const WidgetContainer = ({
13
- data,
14
- id
15
- }) => {
16
- const realData = {
17
- ...data
18
- };
19
- const valueRanges = Array.from(
20
- new Set(
21
- arrayOrArray(realData.zones.Zone).map((zone) => {
22
- return [Number(zone.minimum), Number(zone.maximum)];
23
- }).flat().sort((a, b) => a - b)
24
- )
25
- );
26
- const colorRanges = arrayOrArray(realData.zones.Zone).map((zone) => {
27
- return tinycolor(zone.color).setAlpha(1 - (255 - zone.transparency) / 255).toPercentageRgbString();
28
- }).flat();
29
- const CurrentWidget = getIndex(
30
- [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],
31
- [
32
- realData.widKpiType === "1",
33
- realData.widKpiType === "2",
34
- realData.widKpiType === "3",
35
- realData.widKpiType === "4",
36
- realData.widKpiType === "5",
37
- realData.widKpiType === "6",
38
- realData.widKpiType === "7"
39
- ],
40
- 0
41
- );
42
- return /* @__PURE__ */ jsx(
43
- CurrentWidget,
44
- {
45
- addBorder: realData.border,
46
- backgroundColor: realData.backgroundColor,
47
- colorRanges,
48
- currentValue: Number(realData.currentValue),
49
- decimals: realData.valueDecimals,
50
- currentValueColor: realData.valueColor,
51
- currentValueFontSize: realData.valueFontSize,
52
- forceProp: realData.forceProp,
53
- height: realData.height,
54
- panelId: id,
55
- maxValue: realData.maxValue,
56
- minValue: realData.minValue,
57
- pointerColor: realData.pointerColor,
58
- ringEmptyColor: realData.noValueColor,
59
- ringWidth: realData.ringAnchor,
60
- scaleValuesSize: realData.scaleFontSize,
61
- valueRanges,
62
- width: realData.width
63
- }
64
- );
65
- };
66
-
67
- export { WidgetContainer };
68
- //# sourceMappingURL=WidgetContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"WidgetContainer.js","sources":["../../src/widgets/WidgetContainer.tsx"],"sourcesContent":["import { Scale } from './scale/Scale';\nimport { SpeedMeter } from './speedMeter/SpeedMeter';\nimport { TLight } from './tLight/TLight';\nimport { Oxford } from './oxford/Oxford';\nimport { Counter } from './counter/Counter';\nimport { Ring } from './ring/Ring';\nimport { Thermometer } from './thermometer/Thermometer';\n// import { Custom } from './custom/Custom';\nimport { TWidgetData } from './types';\nimport { arrayOrArray, getIndex } from '@apia/util';\nimport tinycolor from 'tinycolor2';\n\nexport const WidgetContainer = ({\n data,\n id,\n}: {\n data: TWidgetData;\n id: string;\n}) => {\n // const mockData: TWidgetData = {\n // border: true,\n // backgroundColor: 'white',\n // currentValue: 1010,\n // height: 400,\n // width: 400,\n // maxValue: 1050,\n // minValue: 1000,\n // noValueColor: '',\n // pointerColor: 'blue',\n // ringAnchor: 5,\n // scaleFontSize: 20,\n // valueColor: 'darkblue',\n // valueDecimals: 1,\n // valueFontSize: 50,\n // valueType: '',\n // widKpiType: 0,\n // zones: {\n // Zone: [\n // {\n // color: 'blue',\n // maximum: 1020,\n // minimum: 1000,\n // transparency: 230,\n // },\n // {\n // color: 'purple',\n // maximum: 1040,\n // minimum: 1020,\n // transparency: 150,\n // },\n // {\n // color: 'red',\n // maximum: 1050,\n // minimum: 1040,\n // transparency: 255,\n // },\n // ],\n // },\n // };\n\n const realData: TWidgetData = {\n ...data,\n };\n\n const valueRanges = Array.from(\n new Set(\n arrayOrArray(realData.zones.Zone)\n .map((zone) => {\n return [Number(zone.minimum), Number(zone.maximum)];\n })\n .flat()\n .sort((a, b) => a - b),\n ),\n );\n\n const colorRanges = arrayOrArray(realData.zones.Zone)\n .map((zone) => {\n return tinycolor(zone.color)\n .setAlpha(1 - (255 - zone.transparency) / 255)\n .toPercentageRgbString();\n })\n .flat();\n\n const CurrentWidget = getIndex(\n [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],\n [\n realData.widKpiType === '1',\n realData.widKpiType === '2',\n realData.widKpiType === '3',\n realData.widKpiType === '4',\n realData.widKpiType === '5',\n realData.widKpiType === '6',\n realData.widKpiType === '7',\n ],\n 0,\n );\n\n return (\n <CurrentWidget\n addBorder={realData.border}\n backgroundColor={realData.backgroundColor}\n colorRanges={colorRanges}\n currentValue={Number(realData.currentValue)}\n decimals={realData.valueDecimals}\n currentValueColor={realData.valueColor}\n currentValueFontSize={realData.valueFontSize}\n forceProp={realData.forceProp}\n height={realData.height}\n panelId={id}\n maxValue={realData.maxValue}\n minValue={realData.minValue}\n pointerColor={realData.pointerColor}\n ringEmptyColor={realData.noValueColor}\n ringWidth={realData.ringAnchor}\n scaleValuesSize={realData.scaleFontSize}\n valueRanges={valueRanges}\n width={realData.width}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,IAAA;AAAA,EACA,EAAA;AACF,CAGM,KAAA;AA0CJ,EAAA,MAAM,QAAwB,GAAA;AAAA,IAC5B,GAAG,IAAA;AAAA,GACL,CAAA;AAEA,EAAA,MAAM,cAAc,KAAM,CAAA,IAAA;AAAA,IACxB,IAAI,GAAA;AAAA,MACF,aAAa,QAAS,CAAA,KAAA,CAAM,IAAI,CAC7B,CAAA,GAAA,CAAI,CAAC,IAAS,KAAA;AACb,QAAO,OAAA,CAAC,OAAO,IAAK,CAAA,OAAO,GAAG,MAAO,CAAA,IAAA,CAAK,OAAO,CAAC,CAAA,CAAA;AAAA,OACnD,EACA,IAAK,EAAA,CACL,KAAK,CAAC,CAAA,EAAG,CAAM,KAAA,CAAA,GAAI,CAAC,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,aAAa,QAAS,CAAA,KAAA,CAAM,IAAI,CACjD,CAAA,GAAA,CAAI,CAAC,IAAS,KAAA;AACb,IAAO,OAAA,SAAA,CAAU,IAAK,CAAA,KAAK,CACxB,CAAA,QAAA,CAAS,CAAK,GAAA,CAAA,GAAA,GAAM,IAAK,CAAA,YAAA,IAAgB,GAAG,CAAA,CAC5C,qBAAsB,EAAA,CAAA;AAAA,GAC1B,EACA,IAAK,EAAA,CAAA;AAER,EAAA,MAAM,aAAgB,GAAA,QAAA;AAAA,IACpB,CAAC,UAAY,EAAA,MAAA,EAAQ,SAAS,MAAQ,EAAA,WAAA,EAAa,OAAO,IAAI,CAAA;AAAA,IAC9D;AAAA,MACE,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,MACxB,SAAS,UAAe,KAAA,GAAA;AAAA,KAC1B;AAAA,IACA,CAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,WAAW,QAAS,CAAA,MAAA;AAAA,MACpB,iBAAiB,QAAS,CAAA,eAAA;AAAA,MAC1B,WAAA;AAAA,MACA,YAAA,EAAc,MAAO,CAAA,QAAA,CAAS,YAAY,CAAA;AAAA,MAC1C,UAAU,QAAS,CAAA,aAAA;AAAA,MACnB,mBAAmB,QAAS,CAAA,UAAA;AAAA,MAC5B,sBAAsB,QAAS,CAAA,aAAA;AAAA,MAC/B,WAAW,QAAS,CAAA,SAAA;AAAA,MACpB,QAAQ,QAAS,CAAA,MAAA;AAAA,MACjB,OAAS,EAAA,EAAA;AAAA,MACT,UAAU,QAAS,CAAA,QAAA;AAAA,MACnB,UAAU,QAAS,CAAA,QAAA;AAAA,MACnB,cAAc,QAAS,CAAA,YAAA;AAAA,MACvB,gBAAgB,QAAS,CAAA,YAAA;AAAA,MACzB,WAAW,QAAS,CAAA,UAAA;AAAA,MACpB,iBAAiB,QAAS,CAAA,aAAA;AAAA,MAC1B,WAAA;AAAA,MACA,OAAO,QAAS,CAAA,KAAA;AAAA,KAAA;AAAA,GAClB,CAAA;AAEJ;;;;"}
@@ -1,108 +0,0 @@
1
- import { jsxs, jsx } from '@apia/theme/jsx-runtime';
2
- import { Box } from '@apia/theme';
3
- import { useGauge } from 'use-gauge';
4
- import { noNaN, animate, addBoundary } from '@apia/util';
5
- import { useState, useRef, useEffect } from 'react';
6
-
7
- const START_ANGLE = 0;
8
- const END_ANGLE = 360;
9
- const Counter = ({
10
- addBorder = false,
11
- colorRanges,
12
- currentValue,
13
- valueRanges,
14
- maxValue,
15
- minValue,
16
- currentValueFontSize,
17
- panelId
18
- }) => {
19
- const [value, setValue] = useState(currentValue ?? 0);
20
- const actualWidth = (currentValueFontSize ?? 80) * 3 * 0.8;
21
- const diameter = actualWidth;
22
- const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
23
- const domainMin = noNaN(minValue) ?? valueRanges[0];
24
- const gauge = useGauge({
25
- domain: [domainMin, domainMax],
26
- startAngle: START_ANGLE,
27
- endAngle: END_ANGLE,
28
- numTicks: 0,
29
- diameter
30
- });
31
- function getColor(value2) {
32
- const index = valueRanges.findIndex((range) => value2 <= range);
33
- if (index === -1) {
34
- return colorRanges[0];
35
- }
36
- return colorRanges[index - 1] ?? colorRanges[index];
37
- }
38
- const lastCurrentValue = useRef(0);
39
- useEffect(() => {
40
- const difference = currentValue - lastCurrentValue.current;
41
- return animate(
42
- 500,
43
- (progress) => {
44
- const step = addBoundary(
45
- difference * progress + lastCurrentValue.current,
46
- domainMin,
47
- domainMax
48
- );
49
- setValue(Math.round(step));
50
- },
51
- () => {
52
- lastCurrentValue.current = currentValue;
53
- }
54
- );
55
- }, [currentValue]);
56
- return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, className: "widgetContainer__Counter", children: [
57
- /* @__PURE__ */ jsx(
58
- "svg",
59
- {
60
- ...gauge.getSVGProps(),
61
- height: actualWidth,
62
- width: actualWidth,
63
- viewBox: void 0,
64
- children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && `${value}`.length < 4 && /* @__PURE__ */ jsx(
65
- "ellipse",
66
- {
67
- cx: actualWidth / 2,
68
- cy: actualWidth / 2,
69
- rx: actualWidth / 2 - 5,
70
- ry: actualWidth / 2 - 5,
71
- stroke: "gray",
72
- opacity: "0.2",
73
- fill: "none",
74
- strokeLinecap: "round",
75
- strokeWidth: 2
76
- }
77
- ) })
78
- }
79
- ),
80
- /* @__PURE__ */ jsx(
81
- "svg",
82
- {
83
- height: actualWidth,
84
- width: actualWidth,
85
- style: { position: "absolute", left: 0, top: 0 },
86
- children: /* @__PURE__ */ jsx(
87
- "text",
88
- {
89
- x: actualWidth / 2,
90
- y: actualWidth / 2 - 5,
91
- textAnchor: "middle",
92
- style: {
93
- fontSize: `${currentValueFontSize ?? 80}px`,
94
- transition: "fill 0.5s"
95
- },
96
- alignmentBaseline: "central",
97
- fill: getColor(value),
98
- id: `text_${panelId}`,
99
- children: value
100
- }
101
- )
102
- }
103
- )
104
- ] });
105
- };
106
-
107
- export { Counter };
108
- //# sourceMappingURL=Counter.js.map