@economic/taco 2.46.6 → 2.46.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/dist/charts/components/Area/AreaChart.d.ts +19 -0
  2. package/dist/charts/components/Bar/BarChart.d.ts +20 -0
  3. package/dist/charts/components/Donut/ActiveShape.d.ts +8 -0
  4. package/dist/charts/components/Donut/CenteredLabel.d.ts +11 -0
  5. package/dist/charts/components/Donut/DonutChart.d.ts +21 -0
  6. package/dist/charts/components/Donut/Legend.d.ts +13 -0
  7. package/dist/charts/components/Donut/util.d.ts +2 -0
  8. package/dist/charts/components/Legend.d.ts +16 -0
  9. package/dist/charts/components/Line/LineChart.d.ts +18 -0
  10. package/dist/charts/components/ResponsiveContainer.d.ts +5 -0
  11. package/dist/charts/components/Tooltip.d.ts +10 -0
  12. package/dist/charts/components/types.d.ts +5 -0
  13. package/dist/charts/utils/color.d.ts +3 -0
  14. package/dist/charts/utils/common.d.ts +37 -0
  15. package/dist/esm/index.css +18 -0
  16. package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js +67 -0
  17. package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js.map +1 -0
  18. package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js +120 -0
  19. package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js.map +1 -0
  20. package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js +47 -0
  21. package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js.map +1 -0
  22. package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js +27 -0
  23. package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js.map +1 -0
  24. package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js +170 -0
  25. package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js.map +1 -0
  26. package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js +164 -0
  27. package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map +1 -0
  28. package/dist/esm/packages/taco/src/charts/components/Donut/util.js +5 -0
  29. package/dist/esm/packages/taco/src/charts/components/Donut/util.js.map +1 -0
  30. package/dist/esm/packages/taco/src/charts/components/Legend.js +145 -0
  31. package/dist/esm/packages/taco/src/charts/components/Legend.js.map +1 -0
  32. package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js +65 -0
  33. package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map +1 -0
  34. package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js +10 -0
  35. package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map +1 -0
  36. package/dist/esm/packages/taco/src/charts/components/Tooltip.js +44 -0
  37. package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map +1 -0
  38. package/dist/esm/packages/taco/src/charts/utils/color.js +24 -0
  39. package/dist/esm/packages/taco/src/charts/utils/color.js.map +1 -0
  40. package/dist/esm/packages/taco/src/charts/utils/common.js +34 -0
  41. package/dist/esm/packages/taco/src/charts/utils/common.js.map +1 -0
  42. package/dist/esm/packages/taco/src/index.js +4 -0
  43. package/dist/esm/packages/taco/src/index.js.map +1 -1
  44. package/dist/esm/packages/taco/tailwind.colors.js +122 -0
  45. package/dist/esm/packages/taco/tailwind.colors.js.map +1 -0
  46. package/dist/index.css +18 -0
  47. package/dist/index.d.ts +5 -0
  48. package/dist/taco.cjs.development.js +795 -0
  49. package/dist/taco.cjs.development.js.map +1 -1
  50. package/dist/taco.cjs.production.min.js +1 -1
  51. package/dist/taco.cjs.production.min.js.map +1 -1
  52. package/package.json +4 -3
  53. package/tailwind.config.js +3 -2
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LineChart.js","sources":["../../../../../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n CommonChartProps,\n getCartesianGridProps,\n getXAxisProps,\n getYAxisProps,\n getLegendProps,\n getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype LineChartBarProps<TType> = {\n accessor: keyof TType & string;\n color?: Color;\n label?: string;\n};\n\nconst Line = (_: LineChartBarProps<any>) => null;\n\ntype LineChartProps<TType> = CommonChartProps<TType> & {\n children: React.ReactElement<LineChartBarProps<TType>> | React.ReactElement<LineChartBarProps<TType>>[];\n data: TType[];\n formatter?: (value: any) => string;\n};\n\nexport const LineChart = function LineChart<TType = unknown>(externalProps: LineChartProps<TType>) {\n const { children, data, formatter, ...props } = externalProps;\n const [hoveredLine, setHoveredLine] = useState<(keyof TType & string) | null>(null);\n const [activeLines, setActiveLines] = useState<ActiveChartItems<TType>>(() => {\n const keys = {} as ActiveChartItems<TType>;\n\n React.Children.forEach(children, child => {\n keys[child.props.accessor] = true;\n });\n\n return keys;\n });\n\n const handleLegendClick = (entry: PayloadType<TType>): void => {\n setHoveredLine(null);\n setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });\n };\n\n return (\n <ResponsiveContainer>\n <Recharts.LineChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n <Recharts.CartesianGrid {...getCartesianGridProps()} />\n <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n <Recharts.Legend\n {...getLegendProps({\n onClick: handleLegendClick,\n onMouseEnter: entry => setHoveredLine(entry.dataKey),\n onMouseLeave: () => setHoveredLine(null),\n activeItems: activeLines,\n })}\n />\n <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n {React.Children.map(children, child => (\n <Recharts.Line\n activeDot={{\n fill: getThemeColor(child.props.color ?? 'blue-300'),\n }}\n dataKey={child.props.accessor}\n isAnimationActive={false}\n dot={false}\n name={child.props.label}\n stroke={getThemeColor(child.props.color ?? 'blue-300')}\n strokeWidth={2}\n hide={!activeLines[child.props.accessor]}\n opacity={hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1}\n />\n ))}\n </Recharts.LineChart>\n </ResponsiveContainer>\n );\n};\nLineChart.Line = Line;\n"],"names":["Line","_","LineChart","externalProps","children","data","formatter","props","hoveredLine","setHoveredLine","useState","activeLines","setActiveLines","keys","React","Children","forEach","child","accessor","handleLegendClick","entry","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","stroke","strokeWidth","hide","opacity"],"mappings":";;;;;;AAqBA,MAAMA,IAAI,GAAIC,CAAyB,IAAK,IAAI;MAQnCC,SAAS,GAAG,SAASA,SAASA,CAAkBC,aAAoC;EAC7F,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGJ,aAAa;EAC7D,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAgC,IAAI,CAAC;EACnF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAA0B;IACpE,MAAMG,IAAI,GAAG,EAA6B;IAE1CC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,EAAEa,KAAK;MAClCJ,IAAI,CAACI,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC,GAAG,IAAI;KACpC,CAAC;IAEF,OAAOL,IAAI;GACd,CAAC;EAEF,MAAMM,iBAAiB,GAAIC,KAAyB;IAChDX,cAAc,CAAC,IAAI,CAAC;IACpBG,cAAc,CAAC;MAAE,GAAGD,WAAW;MAAE,CAACS,KAAK,CAACC,OAAO,GAAG,CAACV,WAAW,CAACS,KAAK,CAACC,OAAO;KAAG,CAAC;GACnF;EAED,oBACIP,6BAACQ,mBAAmB,qBAChBR,6BAACS,WAAkB;IAAClB,IAAI,EAAEA,IAAI;IAAEmB,MAAM,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC,EAAE;MAAEC,MAAM,EAAE;;kBAC5Ed,6BAACS,aAAsB,oBAAKM,qBAAqB,EAAE,EAAI,eACvDf,6BAACS,KAAc,oBAAKO,aAAa,CAAQvB,KAAK,CAAC,EAAI,eACnDO,6BAACS,KAAc,oBAAKQ,aAAa,CAAQxB,KAAK,CAAC,EAAI,eACnDO,6BAACS,MAAe,oBACRS,cAAc,CAAC;IACfC,OAAO,EAAEd,iBAAiB;IAC1Be,YAAY,EAAEd,KAAK,IAAIX,cAAc,CAACW,KAAK,CAACC,OAAO,CAAC;IACpDc,YAAY,EAAEA,MAAM1B,cAAc,CAAC,IAAI,CAAC;IACxC2B,WAAW,EAAEzB;GAChB,CAAC,EACJ,eACFG,6BAACS,OAAgB,oBAAKc,eAAe,EAAE;IAAE/B,SAAS,EAAEA;KAAa,EAChEQ,cAAK,CAACC,QAAQ,CAACuB,GAAG,CAAClC,QAAQ,EAAEa,KAAK;IAAA,IAAAsB,kBAAA,EAAAC,mBAAA;IAAA,oBAC/B1B,6BAACS,MAAa;MACVkB,SAAS,EAAE;QACPC,IAAI,EAAEC,aAAa,EAAAJ,kBAAA,GAACtB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAL,kBAAA,cAAAA,kBAAA,GAAI,UAAU;OACtD;MACDlB,OAAO,EAAEJ,KAAK,CAACV,KAAK,CAACW,QAAQ;MAC7B2B,iBAAiB,EAAE,KAAK;MACxBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE9B,KAAK,CAACV,KAAK,CAACyC,KAAK;MACvBC,MAAM,EAAEN,aAAa,EAAAH,mBAAA,GAACvB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACtDU,WAAW,EAAE,CAAC;MACdC,IAAI,EAAE,CAACxC,WAAW,CAACM,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC;MACxCkC,OAAO,EAAE5C,WAAW,IAAIS,KAAK,CAACV,KAAK,CAACW,QAAQ,KAAKV,WAAW,GAAG,GAAG,GAAG;MACvE;GACL,CAAC,CACe,CACH;AAE9B;AACAN,SAAS,CAACF,IAAI,GAAGA,IAAI;;;;"}
@@ -0,0 +1,10 @@
1
+ import React__default from 'react';
2
+ import { ResponsiveContainer as ResponsiveContainer$1 } from 'recharts';
3
+
4
+ // A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
5
+ const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(ResponsiveContainer$1, Object.assign({
6
+ className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
7
+ }, props)));
8
+
9
+ export { ResponsiveContainer };
10
+ //# sourceMappingURL=ResponsiveContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveContainer.js","sources":["../../../../../../../src/charts/components/ResponsiveContainer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\ntype ResponsiveContainerProps = Recharts.ResponsiveContainerProps & React.RefAttributes<HTMLDivElement>;\n\n// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.\nexport const ResponsiveContainer = (props: ResponsiveContainerProps) => (\n <Recharts.ResponsiveContainer className=\"!h-[calc(100%-1px)] !w-[calc(100%-1px)]\" {...props} />\n);\n"],"names":["ResponsiveContainer","props","React","Recharts","className"],"mappings":";;;AAKA;MACaA,mBAAmB,GAAIC,KAA+B,kBAC/DC,6BAACC,qBAA4B;EAACC,SAAS,EAAC;GAA8CH,KAAK,EAAI;;;;"}
@@ -0,0 +1,44 @@
1
+ import React__default from 'react';
2
+ import { getThemeColor } from '../utils/color.js';
3
+
4
+ const Tooltip = ({
5
+ active,
6
+ formatter,
7
+ payload,
8
+ style,
9
+ singlePieDonutChart
10
+ }) => {
11
+ const getColor = entry => {
12
+ var _ref, _entry$color;
13
+ if (singlePieDonutChart) {
14
+ // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
15
+ // and one with multiple pies.
16
+ return getThemeColor(entry.payload.color);
17
+ }
18
+ return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
19
+ };
20
+ if (active && payload && payload.length) {
21
+ return /*#__PURE__*/React__default.createElement("dl", {
22
+ className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
23
+ style: style
24
+ }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
25
+ key: `${entry.name}-${index}`
26
+ }, /*#__PURE__*/React__default.createElement("dt", {
27
+ className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
28
+ }, /*#__PURE__*/React__default.createElement("span", {
29
+ className: "-mt-px h-2.5 w-2.5 rounded-sm",
30
+ style: {
31
+ background: getColor(entry)
32
+ }
33
+ }),
34
+ // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
35
+ // and one with multiple pies.
36
+ singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
37
+ className: "mb-0 text-right font-bold text-black "
38
+ }, formatter ? formatter(entry.value) : entry.value)))));
39
+ }
40
+ return null;
41
+ };
42
+
43
+ export { Tooltip };
44
+ //# sourceMappingURL=Tooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n active?: boolean;\n formatter: (value: any) => any;\n payload: any;\n style?: CSSProperties;\n singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n const getColor = entry => {\n if (singlePieDonutChart) {\n // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n // and one with multiple pies.\n return getThemeColor(entry.payload.color);\n }\n\n return entry.color ?? entry.payload.fill ?? 'blue-500';\n };\n\n if (active && payload && payload.length) {\n return (\n <dl\n className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n style={style}>\n {payload.map((entry, index) => (\n <React.Fragment key={`${entry.name}-${index}`}>\n <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n {\n // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n // and one with multiple pies.\n singlePieDonutChart ? entry.payload.label : entry.name\n }\n </dt>\n <dd className=\"mb-0 text-right font-bold text-black \">\n {formatter ? formatter(entry.value) : entry.value}\n </dd>\n </React.Fragment>\n ))}\n </dl>\n );\n }\n\n return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAK,EAAEU,KAAK,mBACtBH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}
@@ -0,0 +1,24 @@
1
+ import themeColors from '../../../tailwind.colors.js';
2
+
3
+ const mapColor = (palette, prefix = '') => {
4
+ return Object.keys(palette).reduce((accum, color) => {
5
+ if (color === 'current') {
6
+ return accum;
7
+ } else if (typeof palette[color] === 'string') {
8
+ return {
9
+ ...accum,
10
+ [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
11
+ };
12
+ } else {
13
+ return {
14
+ ...accum,
15
+ ...mapColor(palette[color], color)
16
+ };
17
+ }
18
+ }, {});
19
+ };
20
+ const colors = /*#__PURE__*/mapColor(themeColors);
21
+ const getThemeColor = color => colors[color];
22
+
23
+ export { colors, getThemeColor };
24
+ //# sourceMappingURL=color.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '@tailwind-theme-colors';\n\nconst mapColor = (palette, prefix = ''): any => {\n return Object.keys(palette).reduce((accum, color) => {\n if (color === 'current') {\n return accum;\n } else if (typeof palette[color] === 'string') {\n return {\n ...accum,\n [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n };\n } else {\n return {\n ...accum,\n ...mapColor(palette[color], color),\n };\n }\n }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}
@@ -0,0 +1,34 @@
1
+ import React__default from 'react';
2
+ import { Legend } from '../components/Legend.js';
3
+ import { Tooltip } from '../components/Tooltip.js';
4
+
5
+ const getCartesianGridProps = () => ({
6
+ vertical: false
7
+ });
8
+ const getXAxisProps = props => ({
9
+ axisLine: false,
10
+ dataKey: props.accessor,
11
+ fontSize: 12,
12
+ scale: props.xAxisScale,
13
+ tickLine: false,
14
+ tickFormatter: props.xAxisTickFormat
15
+ });
16
+ const getYAxisProps = props => ({
17
+ axisLine: false,
18
+ fontSize: 12,
19
+ scale: props.yAxisScale,
20
+ tickLine: false,
21
+ tickFormatter: props.yAxisTickFormat
22
+ });
23
+ const getLegendProps = props => ({
24
+ content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
25
+ });
26
+ const getTooltipProps = (props = undefined) => ({
27
+ content: /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, props)),
28
+ wrapperStyle: {
29
+ outline: 'none'
30
+ }
31
+ });
32
+
33
+ export { getCartesianGridProps, getLegendProps, getTooltipProps, getXAxisProps, getYAxisProps };
34
+ //# sourceMappingURL=common.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"common.js","sources":["../../../../../../../src/charts/utils/common.tsx"],"sourcesContent":["import React from 'react';\nimport { ScaleType } from 'recharts/types/util/types';\n\nimport { Legend } from '../components/Legend';\nimport { Tooltip } from '../components/Tooltip';\nimport { LegendProps } from '../components/Legend';\n\nexport type CommonChartProps<TType> = {\n accessor: keyof TType & string;\n // eslint-disable-next-line @typescript-eslint/ban-types\n xAxisScale?: ScaleType | Function;\n xAxisTickFormat: (value: any) => string;\n // eslint-disable-next-line @typescript-eslint/ban-types\n yAxisScale?: ScaleType | Function;\n yAxisTickFormat: (value: any) => string;\n};\n\nexport const getCartesianGridProps = () => ({\n vertical: false,\n});\n\nexport const getXAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n axisLine: false,\n dataKey: props.accessor,\n fontSize: 12,\n scale: props.xAxisScale,\n tickLine: false,\n tickFormatter: props.xAxisTickFormat,\n});\n\nexport const getYAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n axisLine: false,\n fontSize: 12,\n scale: props.yAxisScale,\n tickLine: false,\n tickFormatter: props.yAxisTickFormat,\n});\n\nexport const getLegendProps = <TType,>(props: LegendProps<TType>) => ({\n content: <Legend {...props} />,\n});\n\nexport const getTooltipProps = (props: any = undefined) => ({\n content: <Tooltip {...props} />,\n wrapperStyle: { outline: 'none' },\n});\n"],"names":["getCartesianGridProps","vertical","getXAxisProps","props","axisLine","dataKey","accessor","fontSize","scale","xAxisScale","tickLine","tickFormatter","xAxisTickFormat","getYAxisProps","yAxisScale","yAxisTickFormat","getLegendProps","content","React","Legend","getTooltipProps","undefined","Tooltip","wrapperStyle","outline"],"mappings":";;;;MAiBaA,qBAAqB,GAAGA,OAAO;EACxCC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAYC,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAEF,KAAK,CAACG,QAAQ;EACvBC,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACM,UAAU;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACS;CACxB;MAEYC,aAAa,GAAYV,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfG,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACW,UAAU;EACvBJ,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACY;CACxB;MAEYC,cAAc,GAAYb,KAAyB,KAAM;EAClEc,OAAO,eAAEC,6BAACC,MAAM,oBAAKhB,KAAK;CAC7B;MAEYiB,eAAe,GAAGA,CAACjB,QAAakB,SAAS,MAAM;EACxDJ,OAAO,eAAEC,6BAACI,OAAO,oBAAKnB,KAAK,EAAI;EAC/BoB,YAAY,EAAE;IAAEC,OAAO,EAAE;;CAC5B;;;;"}
@@ -74,6 +74,10 @@ export { Textarea } from './components/Textarea/Textarea.js';
74
74
  export { Table3 } from './components/Table3/Table3.js';
75
75
  export { Tabs } from './components/Tabs/Tabs.js';
76
76
  export { Tour, TourStep } from './components/Tour/Tour.js';
77
+ export { AreaChart } from './charts/components/Area/AreaChart.js';
78
+ export { BarChart } from './charts/components/Bar/BarChart.js';
79
+ export { DonutChart } from './charts/components/Donut/DonutChart.js';
80
+ export { LineChart } from './charts/components/Line/LineChart.js';
77
81
  export { Header } from './components/Header/Header.js';
78
82
  export { Layout } from './components/Layout/Layout.js';
79
83
  export { getNavigationLinkClasses } from './components/Navigation2/components/Link.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,122 @@
1
+ // NOTE: this file is intentianally a js file so that it can be consumed by tailwind.config.js
2
+
3
+ const THEME_COLORS = {
4
+ transparent: 'transparent',
5
+ current: 'currentColor',
6
+ white: '#fff',
7
+ black: '#1c1c1c',
8
+ brand: {
9
+ vismaRed: '#E70641',
10
+ paleOrange: '#FFF5E5',
11
+ sunsetOrange: '#E89C2E',
12
+ midnightBlue: '#29283E',
13
+ coolBlue: '#F5F7F9'
14
+ },
15
+ grey: {
16
+ lightest: '#fafafa',
17
+ light: '#F6F6F6',
18
+ DEFAULT: '#EBEBEB',
19
+ dark: '#DDDDDD',
20
+ darker: '#ACACAC',
21
+ darkest: '#595959',
22
+ darkNew: '#a5a6a9',
23
+ 50: '#fafafa',
24
+ 100: '#F6F6F6',
25
+ 200: '#EBEBEB',
26
+ 300: '#DDDDDD',
27
+ 500: '#ACACAC',
28
+ 700: '#595959',
29
+ 900: '#303030'
30
+ },
31
+ purple: {
32
+ lightest: '#585c74',
33
+ light: '#4b4f64',
34
+ DEFAULT: '#3d4153',
35
+ dark: '#353a48',
36
+ darker: '#29283e',
37
+ darkest: '#212032',
38
+ darkNew_1: '#373647',
39
+ darkNew_2: '#414050',
40
+ 100: '#EEE5FF',
41
+ 200: '#ddd1ff',
42
+ 300: '#CBBCFE',
43
+ 500: '#9270FA',
44
+ 700: '#6542D1',
45
+ 900: '#412970'
46
+ },
47
+ blue: {
48
+ lightest: '#DEEBFF',
49
+ light: '#75A0F5',
50
+ DEFAULT: '#4573D2',
51
+ dark: '#2B57B4',
52
+ 100: '#DEEBFF',
53
+ 200: '#AACCFF',
54
+ 300: '#75A0F5',
55
+ 500: '#4573D2',
56
+ 700: '#2B57B4',
57
+ 900: '#29283E'
58
+ },
59
+ red: {
60
+ lightest: '#FFDAD2',
61
+ light: '#E66568',
62
+ DEFAULT: '#CE3F42',
63
+ dark: '#950027',
64
+ 100: '#FFDAD2',
65
+ 200: '#f3a09d',
66
+ 300: '#E66568',
67
+ 500: '#CE3F42',
68
+ 700: '#950027',
69
+ 900: '#64001B'
70
+ },
71
+ green: {
72
+ lightest: '#cdf0e7',
73
+ light: '#52C7AB',
74
+ DEFAULT: '#08AE87',
75
+ dark: '#028465',
76
+ 100: '#cdf0e7',
77
+ 200: '#9be1ce',
78
+ 300: '#52C7AB',
79
+ 500: '#08AE87',
80
+ 700: '#028465',
81
+ 900: '#14493A'
82
+ },
83
+ yellow: {
84
+ lightest: '#FFF1C3',
85
+ light: '#FFD665',
86
+ DEFAULT: '#FFBD3B',
87
+ dark: '#e89c2e',
88
+ 100: '#FFF1C3',
89
+ 200: '#ffe494',
90
+ 300: '#FFD665',
91
+ 500: '#FFBD3B',
92
+ 700: '#e89c2e',
93
+ 900: '#733700'
94
+ },
95
+ pink: {
96
+ 100: '#FFE3F7',
97
+ 200: '#fcb9e9',
98
+ 300: '#F98EDB',
99
+ 500: '#E165BF',
100
+ 700: '#CF49AA',
101
+ 900: '#870062'
102
+ },
103
+ brown: {
104
+ 100: '#EEE0DA',
105
+ 200: '#DFCCC2',
106
+ 300: '#C4AB9E',
107
+ 500: '#93715D',
108
+ 700: '#73503B',
109
+ 900: '#45291F'
110
+ },
111
+ orange: {
112
+ 100: '#FFE3BB',
113
+ 200: '#FCCB80',
114
+ 300: '#FAB64D',
115
+ 500: '#F99702',
116
+ 700: '#EF7D00',
117
+ 900: '#4A2811'
118
+ }
119
+ };
120
+
121
+ export default THEME_COLORS;
122
+ //# sourceMappingURL=tailwind.colors.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tailwind.colors.js","sources":["../../../../tailwind.colors.js"],"sourcesContent":["// NOTE: this file is intentianally a js file so that it can be consumed by tailwind.config.js\n\nconst THEME_COLORS = {\n transparent: 'transparent',\n current: 'currentColor',\n white: '#fff',\n black: '#1c1c1c',\n brand: {\n vismaRed: '#E70641',\n paleOrange: '#FFF5E5',\n sunsetOrange: '#E89C2E',\n midnightBlue: '#29283E',\n coolBlue: '#F5F7F9',\n },\n grey: {\n lightest: '#fafafa',\n light: '#F6F6F6',\n DEFAULT: '#EBEBEB',\n dark: '#DDDDDD',\n darker: '#ACACAC',\n darkest: '#595959',\n darkNew: '#a5a6a9',\n 50: '#fafafa',\n 100: '#F6F6F6',\n 200: '#EBEBEB',\n 300: '#DDDDDD',\n 500: '#ACACAC',\n 700: '#595959',\n 900: '#303030',\n },\n purple: {\n lightest: '#585c74',\n light: '#4b4f64',\n DEFAULT: '#3d4153',\n dark: '#353a48',\n darker: '#29283e',\n darkest: '#212032',\n darkNew_1: '#373647',\n darkNew_2: '#414050',\n 100: '#EEE5FF',\n 200: '#ddd1ff',\n 300: '#CBBCFE',\n 500: '#9270FA',\n 700: '#6542D1',\n 900: '#412970',\n },\n blue: {\n lightest: '#DEEBFF',\n light: '#75A0F5',\n DEFAULT: '#4573D2',\n dark: '#2B57B4',\n 100: '#DEEBFF',\n 200: '#AACCFF',\n 300: '#75A0F5',\n 500: '#4573D2',\n 700: '#2B57B4',\n 900: '#29283E',\n },\n red: {\n lightest: '#FFDAD2',\n light: '#E66568',\n DEFAULT: '#CE3F42',\n dark: '#950027',\n 100: '#FFDAD2',\n 200: '#f3a09d',\n 300: '#E66568',\n 500: '#CE3F42',\n 700: '#950027',\n 900: '#64001B',\n },\n green: {\n lightest: '#cdf0e7',\n light: '#52C7AB',\n DEFAULT: '#08AE87',\n dark: '#028465',\n 100: '#cdf0e7',\n 200: '#9be1ce',\n 300: '#52C7AB',\n 500: '#08AE87',\n 700: '#028465',\n 900: '#14493A',\n },\n yellow: {\n lightest: '#FFF1C3',\n light: '#FFD665',\n DEFAULT: '#FFBD3B',\n dark: '#e89c2e',\n 100: '#FFF1C3',\n 200: '#ffe494',\n 300: '#FFD665',\n 500: '#FFBD3B',\n 700: '#e89c2e',\n 900: '#733700',\n },\n pink: {\n 100: '#FFE3F7',\n 200: '#fcb9e9',\n 300: '#F98EDB',\n 500: '#E165BF',\n 700: '#CF49AA',\n 900: '#870062',\n },\n brown: {\n 100: '#EEE0DA',\n 200: '#DFCCC2',\n 300: '#C4AB9E',\n 500: '#93715D',\n 700: '#73503B',\n 900: '#45291F',\n },\n orange: {\n 100: '#FFE3BB',\n 200: '#FCCB80',\n 300: '#FAB64D',\n 500: '#F99702',\n 700: '#EF7D00',\n 900: '#4A2811',\n },\n};\n\nexport default THEME_COLORS;\n"],"names":["THEME_COLORS","transparent","current","white","black","brand","vismaRed","paleOrange","sunsetOrange","midnightBlue","coolBlue","grey","lightest","light","DEFAULT","dark","darker","darkest","darkNew","purple","darkNew_1","darkNew_2","blue","red","green","yellow","pink","brown","orange"],"mappings":"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"}
package/dist/index.css CHANGED
@@ -180,6 +180,24 @@
180
180
  }
181
181
  }
182
182
 
183
+ .recharts-cartesian-axis line,
184
+ .recharts-cartesian-grid-horizontal line {
185
+ stroke: #efefef !important;
186
+ }
187
+
188
+ .recharts-tooltip-cursor {
189
+ fill: transparent !important;
190
+ }
191
+
192
+ .recharts-legend-wrapper {
193
+ left: 0 !important;
194
+ width: 100% !important;
195
+ }
196
+
197
+ .recharts-wrapper > svg g {
198
+ outline: none !important;
199
+ }
200
+
183
201
  [data-taco='badge'] > [data-taco='spinner'] {
184
202
  @apply ml-2 h-3 w-3;
185
203
  }
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import './css/global.css';
2
+ import './charts/style.css';
2
3
  export * from './components/Alert/Alert';
3
4
  export * from './components/AlertDialog/AlertDialog';
4
5
  export * from './components/Accordion/Accordion';
@@ -52,6 +53,10 @@ export * from './components/Tooltip/Tooltip';
52
53
  export * from './components/Tour/Tour';
53
54
  export * from './components/Treeview/Treeview';
54
55
  export * from './components/VisuallyHidden/VisuallyHidden';
56
+ export * from './charts/components/Area/AreaChart';
57
+ export * from './charts/components/Bar/BarChart';
58
+ export * from './charts/components/Donut/DonutChart';
59
+ export * from './charts/components/Line/LineChart';
55
60
  export * from './components/Header/Header';
56
61
  export * from './components/Layout/Layout';
57
62
  export * from './components/Navigation2/Navigation2';