@economic/taco 2.46.6 → 2.46.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/charts/components/Area/AreaChart.d.ts +19 -0
- package/dist/charts/components/Bar/BarChart.d.ts +20 -0
- package/dist/charts/components/Donut/ActiveShape.d.ts +8 -0
- package/dist/charts/components/Donut/CenteredLabel.d.ts +11 -0
- package/dist/charts/components/Donut/DonutChart.d.ts +21 -0
- package/dist/charts/components/Donut/Legend.d.ts +13 -0
- package/dist/charts/components/Donut/util.d.ts +2 -0
- package/dist/charts/components/Legend.d.ts +16 -0
- package/dist/charts/components/Line/LineChart.d.ts +18 -0
- package/dist/charts/components/ResponsiveContainer.d.ts +5 -0
- package/dist/charts/components/Tooltip.d.ts +10 -0
- package/dist/charts/components/types.d.ts +5 -0
- package/dist/charts/utils/color.d.ts +3 -0
- package/dist/charts/utils/common.d.ts +37 -0
- package/dist/esm/index.css +18 -0
- package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js +67 -0
- package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js +120 -0
- package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js +47 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js +27 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js +170 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js +164 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/util.js +5 -0
- package/dist/esm/packages/taco/src/charts/components/Donut/util.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Legend.js +145 -0
- package/dist/esm/packages/taco/src/charts/components/Legend.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js +65 -0
- package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js +10 -0
- package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/components/Tooltip.js +44 -0
- package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/utils/color.js +24 -0
- package/dist/esm/packages/taco/src/charts/utils/color.js.map +1 -0
- package/dist/esm/packages/taco/src/charts/utils/common.js +34 -0
- package/dist/esm/packages/taco/src/charts/utils/common.js.map +1 -0
- package/dist/esm/packages/taco/src/index.js +4 -0
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/colors.js +122 -0
- package/dist/esm/packages/taco/src/utils/colors.js.map +1 -0
- package/dist/index.css +18 -0
- package/dist/index.d.ts +5 -0
- package/dist/taco.cjs.development.js +795 -0
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +3 -3
- 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 '../../utils/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 '../../utils/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=colors.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"colors.js","sources":["../../../../../../src/utils/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';
|