@toptal/picasso-charts 47.0.0 → 47.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BarChart/BarChart.d.ts +12 -3
- package/BarChart/BarChart.js +7 -4
- package/BarChart/BarChart.js.map +1 -1
- package/package.json +1 -1
package/BarChart/BarChart.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export declare type BarChartDataItem<K extends string | number | symbol> = {
|
|
|
6
6
|
[key in K]: number;
|
|
7
7
|
};
|
|
8
8
|
};
|
|
9
|
+
declare type ShowEverytNthTickValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
|
9
10
|
export interface Props<K extends string | number | symbol> extends BaseChartProps {
|
|
10
11
|
/**
|
|
11
12
|
* A list of data points to be rendered as a bar chart
|
|
@@ -37,11 +38,19 @@ export interface Props<K extends string | number | symbol> extends BaseChartProp
|
|
|
37
38
|
showBarLabel?: boolean;
|
|
38
39
|
/** If set false, animation of bar will be disabled */
|
|
39
40
|
isAnimationActive?: boolean;
|
|
41
|
+
/** Makes X-axis show only every Nth tick. `0` hides all ticks, `1` shows all ticks (default behavior), `2` shows every 2nd tick, and so on */
|
|
42
|
+
showEveryNthTickOnXAxis?: ShowEverytNthTickValue;
|
|
43
|
+
/** Makes Y-axis show only every Nth tick. `0` hides all ticks, `1` shows all ticks (default behavior), `2` shows every 2nd tick, and so on */
|
|
44
|
+
showEveryNthTickOnYAxis?: ShowEverytNthTickValue;
|
|
45
|
+
/** If bars should fill all the empty space */
|
|
46
|
+
autoSize?: boolean;
|
|
47
|
+
/** Maximum size for the bar */
|
|
48
|
+
maxBarSize?: number;
|
|
40
49
|
}
|
|
41
|
-
export declare const formatData: <
|
|
42
|
-
export declare const extractValues: <
|
|
50
|
+
export declare const formatData: <T extends string>(data: BarChartDataItem<T>[]) => ({ [key in T]: number; } & BarChartDataItem<T>)[];
|
|
51
|
+
export declare const extractValues: <T extends string>(data: BarChartDataItem<T>[]) => { [key in T]: number; }[];
|
|
43
52
|
declare const BarChart: {
|
|
44
|
-
<
|
|
53
|
+
<T extends string>({ data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor, labelKey, getBarLabelColor, testIds, showBarLabel, isAnimationActive, layout, showEveryNthTickOnXAxis, showEveryNthTickOnYAxis, autoSize, maxBarSize, ...rest }: Props<T>): JSX.Element;
|
|
45
54
|
defaultProps: {
|
|
46
55
|
height: number;
|
|
47
56
|
width: string;
|
package/BarChart/BarChart.js
CHANGED
|
@@ -30,8 +30,11 @@ export const formatData = (data) => data.map(dataItem => (Object.assign(Object.a
|
|
|
30
30
|
const defaultGetBarColor = () => palette.blue.main;
|
|
31
31
|
const defaultGetBarLabelColor = () => palette.grey.dark;
|
|
32
32
|
export const extractValues = (data) => data.map(dataItem => dataItem.value);
|
|
33
|
+
const DEFAULT_BAR_CATEGORY_GAP = 50;
|
|
34
|
+
const DEFAULT_BAR_SIZE = 32;
|
|
35
|
+
const DEFAULT_BAR_GAP = 2;
|
|
33
36
|
const BarChart = (_a) => {
|
|
34
|
-
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey, getBarLabelColor = defaultGetBarLabelColor, testIds, showBarLabel, isAnimationActive, layout } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "testIds", "showBarLabel", "isAnimationActive", "layout"]);
|
|
37
|
+
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey, getBarLabelColor = defaultGetBarLabelColor, testIds, showBarLabel, isAnimationActive, layout, showEveryNthTickOnXAxis = 1, showEveryNthTickOnYAxis = 1, autoSize, maxBarSize } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "testIds", "showBarLabel", "isAnimationActive", "layout", "showEveryNthTickOnXAxis", "showEveryNthTickOnYAxis", "autoSize", "maxBarSize"]);
|
|
35
38
|
const horizontal = layout === 'horizontal';
|
|
36
39
|
const dataKeys = Object.keys(data[0].value);
|
|
37
40
|
const formattedData = formatData(data);
|
|
@@ -54,10 +57,10 @@ const BarChart = (_a) => {
|
|
|
54
57
|
return (React.createElement("div", Object.assign({ style: { height, width }, className: className }, rest),
|
|
55
58
|
React.createElement(StyleOverrides, null),
|
|
56
59
|
React.createElement(ResponsiveContainer, { width: width, height: height },
|
|
57
|
-
React.createElement(RechartsBarChart, { layout: layout, margin: chartMargins, data: formattedData, barGap:
|
|
60
|
+
React.createElement(RechartsBarChart, { layout: layout, margin: chartMargins, data: formattedData, maxBarSize: maxBarSize, barGap: DEFAULT_BAR_GAP, barCategoryGap: !autoSize ? DEFAULT_BAR_CATEGORY_GAP : undefined, barSize: !autoSize ? DEFAULT_BAR_SIZE : undefined },
|
|
58
61
|
React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: palette.grey.lighter2, vertical: !horizontal }),
|
|
59
|
-
React.createElement(XAxis, Object.assign({}, xAxisProps, { type: horizontal ? 'category' : 'number', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN })),
|
|
60
|
-
React.createElement(YAxis, Object.assign({}, yAxisProps, { type: horizontal ? 'number' : 'category', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN })),
|
|
62
|
+
React.createElement(XAxis, Object.assign({}, xAxisProps, { type: horizontal ? 'category' : 'number', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnXAxis - 1 })),
|
|
63
|
+
React.createElement(YAxis, Object.assign({}, yAxisProps, { type: horizontal ? 'number' : 'category', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnYAxis - 1 })),
|
|
61
64
|
tooltipElement,
|
|
62
65
|
dataKeys.map(dataKey => (React.createElement(Bar, { key: dataKey, dataKey: dataKey, label: showBarLabel ? (React.createElement(BarChartLabel, { dataKey: dataKey, getBarLabelColor: getBarLabelColor })) : undefined, isAnimationActive: isAnimationActive }, data.map((entry, index) => {
|
|
63
66
|
const fill = getBarColor === null || getBarColor === void 0 ? void 0 : getBarColor({ dataKey, entry, index });
|
package/BarChart/BarChart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../src/BarChart/BarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,aAAa,EACb,KAAK,EACL,OAAO,EACP,GAAG,EACH,KAAK,EACL,mBAAmB,EACnB,IAAI,GACL,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAElE,MAAM,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACV,WAAW,GACZ,GAAG,eAAe,CAAA;AACnB,MAAM,qBAAqB,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../src/BarChart/BarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,aAAa,EACb,KAAK,EACL,OAAO,EACP,GAAG,EACH,KAAK,EACL,mBAAmB,EACnB,IAAI,GACL,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAElE,MAAM,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACV,WAAW,GACZ,GAAG,eAAe,CAAA;AACnB,MAAM,qBAAqB,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAA;AAgDjD,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAC3B,+BACE,uBAAuB,EAAE;QACvB,MAAM,EAAE;;;oBAGM,OAAO,CAAC,IAAI,CAAC,IAAI;;OAE9B;KACF,GACD,CACH,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,IAAsB,EAAE,EAAE,CACrE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,iCAChB,QAAQ,CAAC,KAAK,GACd,QAAQ,EACX,CAAC,CAAA;AAEL,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAClD,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAmB,IAAsB,EAAE,EAAE,CACxE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEtC,MAAM,wBAAwB,GAAG,EAAE,CAAA;AACnC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,eAAe,GAAG,CAAC,CAAA;AAEzB,MAAM,QAAQ,GAAG,CAAmB,EAoBzB,EAAE,EAAE;QApBqB,EAClC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,aAAa,EACb,yBAAyB,EACzB,WAAW,GAAG,kBAAkB,EAChC,QAAQ,EACR,gBAAgB,GAAG,uBAAuB,EAC1C,OAAO,EACP,YAAY,EACZ,iBAAiB,EACjB,MAAM,EACN,uBAAuB,GAAG,CAAC,EAC3B,uBAAuB,GAAG,CAAC,EAC3B,QAAQ,EACR,UAAU,OAED,EADN,IAAI,cAnB2B,0RAoBnC,CADQ;IAEP,MAAM,UAAU,GAAG,MAAM,KAAK,YAAY,CAAA;IAC1C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAQ,CAAA;IAElD,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAEtC,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CACH,OAAO,CAAC,CAAC,CAAC,CACR,oBAAC,OAAO,IACN,YAAY,EAAE,qBAAqB,iBACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAC7B,kBAAkB,EAChB,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,EAE9D,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,KAAK,GACb,CACH,CAAC,CAAC,CAAC,SAAS,EACf,CAAC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CACtE,CAAA;IAED,MAAM,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAA;IACpD,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE,eAAe,CAAC,CAAA;IAEnE,MAAM,iBAAiB,GAAG;QACxB,OAAO,EAAE,QAAQ,IAAI,MAAM;QAC3B,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,CAAC;QACX,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE;KAC5B,CAAA;IACD,MAAM,cAAc,GAAG;QACrB,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KAC5C,CAAA;IAED,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAA;IAClE,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAA;IAEnE,OAAO,CACL,2CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,IAAM,IAAI;QAC3D,oBAAC,cAAc,OAAG;QAClB,oBAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM;YAC/C,oBAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,eAAe,EACvB,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,EAChE,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;gBAEjD,oBAAC,aAAa,IACZ,eAAe,EAAC,KAAK,EACrB,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7B,QAAQ,EAAE,CAAC,UAAU,GACrB;gBACF,oBAAC,KAAK,oBACA,UAAU,IACd,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EACxC,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,UAAU,EAAE,YAAY,EACxB,UAAU,EAAE,WAAW,EACvB,QAAQ,EAAE,uBAAuB,GAAG,CAAC,IACrC;gBACF,oBAAC,KAAK,oBACA,UAAU,IACd,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EACxC,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,UAAU,EAAE,YAAY,EACxB,UAAU,EAAE,WAAW,EACvB,QAAQ,EAAE,uBAAuB,GAAG,CAAC,IACrC;gBACD,cAAc;gBACd,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB,oBAAC,GAAG,IACF,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,YAAY,CAAC,CAAC,CAAC,CACb,oBAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,iBAAiB,EAAE,iBAAiB,IAEnC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBACzB,MAAM,IAAI,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;oBAErD,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,EACpD,IAAI,EAAE,IAAI,GACV,CACH,CAAA;gBACH,CAAC,CAAC,CACE,CACP,CAAC,CACe,CACC,CAClB,CACP,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACtB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,YAAY;CACrB,CAAA;AAED,eAAe,QAAQ,CAAA"}
|