@toptal/picasso-charts 59.0.1-alpha-fx-5530-environmentbanner-1d40522f1.101 → 59.0.1
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/dist-package/src/BarChart/BarChart.d.ts +1 -0
- package/dist-package/src/BarChart/BarChart.d.ts.map +1 -1
- package/dist-package/src/BarChart/BarChart.js +8 -4
- package/dist-package/src/BarChart/BarChart.js.map +1 -1
- package/package.json +3 -4
- package/src/BarChart/BarChart.tsx +32 -20
- package/src/BarChart/story/index.jsx +2 -1
- package/LICENSE +0 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAiB5E,aAAK,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAExE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CACvD,SAAQ,cAAc;IACtB;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE;YACN,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE;iBAAG,GAAG,IAAI,CAAC,GAAG,GAAG;aAAE,CAAA;SAC3B,CAAA;QACD,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,KAAK,MAAM,CAAA;IACZ,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAA;IACvD,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IACxB,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC7E;AAeD,eAAO,MAAM,UAAU,wHAIlB,CAAA;AAKL,eAAO,MAAM,aAAa,gGACY,CAAA;AAMtC,QAAA,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAiB5E,aAAK,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAExE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CACvD,SAAQ,cAAc;IACtB;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE;YACN,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE;iBAAG,GAAG,IAAI,CAAC,GAAG,GAAG;aAAE,CAAA;SAC3B,CAAA;QACD,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,KAAK,MAAM,CAAA;IACZ,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAA;IACvD,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IACxB,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC7E;AAeD,eAAO,MAAM,UAAU,wHAIlB,CAAA;AAKL,eAAO,MAAM,aAAa,gGACY,CAAA;AAMtC,QAAA,MAAM,QAAQ;;;;;;;;;;CAuJb,CAAA;AAWD,eAAe,QAAQ,CAAA"}
|
|
@@ -35,7 +35,7 @@ const DEFAULT_BAR_CATEGORY_GAP = 50;
|
|
|
35
35
|
const DEFAULT_BAR_SIZE = 32;
|
|
36
36
|
const DEFAULT_BAR_GAP = 2;
|
|
37
37
|
const BarChart = (_a) => {
|
|
38
|
-
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey, getBarLabelColor = defaultGetBarLabelColor, renderBarIndicators, testIds, showBarLabel, isAnimationActive, layout, stackedBars, showEveryNthTickOnXAxis = 1, showEveryNthTickOnYAxis = 1, autoSize, maxBarSize, valueAxisTickFormatter } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "renderBarIndicators", "testIds", "showBarLabel", "isAnimationActive", "layout", "stackedBars", "showEveryNthTickOnXAxis", "showEveryNthTickOnYAxis", "autoSize", "maxBarSize", "valueAxisTickFormatter"]);
|
|
38
|
+
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey = 'name', getBarLabelColor = defaultGetBarLabelColor, renderBarIndicators, testIds, showBarLabel, isAnimationActive, layout, stackedBars, showEveryNthTickOnXAxis = 1, showEveryNthTickOnYAxis = 1, autoSize, maxBarSize, valueAxisTickFormatter } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "renderBarIndicators", "testIds", "showBarLabel", "isAnimationActive", "layout", "stackedBars", "showEveryNthTickOnXAxis", "showEveryNthTickOnYAxis", "autoSize", "maxBarSize", "valueAxisTickFormatter"]);
|
|
39
39
|
const horizontal = layout === 'horizontal';
|
|
40
40
|
const dataKeys = Object.keys(data[0].value);
|
|
41
41
|
const formattedData = formatData(data);
|
|
@@ -43,7 +43,7 @@ const BarChart = (_a) => {
|
|
|
43
43
|
const topDomain = findTopDomain(extractValues(data), stackedBars);
|
|
44
44
|
const ticks = getD3Ticks(BOTTOM_DOMAIN, topDomain, NUMBER_OF_TICKS);
|
|
45
45
|
const categoryAxisProps = {
|
|
46
|
-
dataKey: labelKey
|
|
46
|
+
dataKey: labelKey,
|
|
47
47
|
height: TICK_HEIGHT,
|
|
48
48
|
interval: 0,
|
|
49
49
|
tick: { width: TICK_WIDTH },
|
|
@@ -56,13 +56,16 @@ const BarChart = (_a) => {
|
|
|
56
56
|
};
|
|
57
57
|
const xAxisProps = horizontal ? categoryAxisProps : valueAxisProps;
|
|
58
58
|
const yAxisProps = !horizontal ? categoryAxisProps : valueAxisProps;
|
|
59
|
+
// If ticks are not shown, the corresponding axis is not rendered to avoid empty space
|
|
60
|
+
const renderXAxis = showEveryNthTickOnXAxis !== 0;
|
|
61
|
+
const renderYAxis = showEveryNthTickOnYAxis !== 0;
|
|
59
62
|
return (React.createElement("div", Object.assign({ style: { height, width }, className: className }, rest),
|
|
60
63
|
React.createElement(StyleOverrides, null),
|
|
61
64
|
React.createElement(ResponsiveContainer, { width: width, height: height },
|
|
62
65
|
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, overflow: 'visible' },
|
|
63
66
|
React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: palette.grey.lighter2, vertical: !horizontal }),
|
|
64
|
-
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 })),
|
|
65
|
-
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 })),
|
|
67
|
+
renderXAxis && (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 }))),
|
|
68
|
+
renderYAxis && (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 }))),
|
|
66
69
|
tooltipElement,
|
|
67
70
|
dataKeys.map(dataKey => (React.createElement(Bar, { key: dataKey, dataKey: dataKey, label: showBarLabel ? (React.createElement(BarChartLabel, { dataKey: dataKey, getBarLabelColor: getBarLabelColor })) : undefined, isAnimationActive: isAnimationActive, stackId: stackedBars && defineStackId(dataKey, stackedBars) }, data.map((entry, index) => {
|
|
68
71
|
const fill = getBarColor === null || getBarColor === void 0 ? void 0 : getBarColor({ dataKey, entry, index });
|
|
@@ -75,6 +78,7 @@ BarChart.defaultProps = {
|
|
|
75
78
|
width: 'auto',
|
|
76
79
|
tooltip: false,
|
|
77
80
|
showBarLabel: true,
|
|
81
|
+
labelKey: 'name',
|
|
78
82
|
layout: 'horizontal',
|
|
79
83
|
};
|
|
80
84
|
export default BarChart;
|
|
@@ -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;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,aAAa,EACb,KAAK,EACL,OAAO,EACP,GAAG,EACH,UAAU,EACV,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;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACtD,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;AA+CjD,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,EAuBzB,EAAE,EAAE;QAvBqB,EAClC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,aAAa,EACb,yBAAyB,EACzB,WAAW,GAAG,kBAAkB,EAChC,QAAQ,
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-charts",
|
|
3
|
-
"version": "59.0.1
|
|
3
|
+
"version": "59.0.1",
|
|
4
4
|
"description": "Charts components of Picasso",
|
|
5
5
|
"author": "Toptal",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@types/d3-array": "3.0.4"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@toptal/picasso-utils": "1.0.
|
|
35
|
+
"@toptal/picasso-utils": "1.0.3",
|
|
36
36
|
"classnames": "^2.5.1",
|
|
37
37
|
"d3-array": "^3.2.2",
|
|
38
38
|
"debounce": "^1.2.1",
|
|
@@ -46,6 +46,5 @@
|
|
|
46
46
|
"dist-package/**",
|
|
47
47
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
48
48
|
"src"
|
|
49
|
-
]
|
|
50
|
-
"gitHead": "1d40522f1bce32586aabee5e24d7366183f47611"
|
|
49
|
+
]
|
|
51
50
|
}
|
|
@@ -116,7 +116,7 @@ const BarChart = <T extends string>({
|
|
|
116
116
|
customTooltip,
|
|
117
117
|
allowTooltipEscapeViewBox,
|
|
118
118
|
getBarColor = defaultGetBarColor,
|
|
119
|
-
labelKey,
|
|
119
|
+
labelKey = 'name',
|
|
120
120
|
getBarLabelColor = defaultGetBarLabelColor,
|
|
121
121
|
renderBarIndicators,
|
|
122
122
|
testIds,
|
|
@@ -156,7 +156,7 @@ const BarChart = <T extends string>({
|
|
|
156
156
|
const ticks = getD3Ticks(BOTTOM_DOMAIN, topDomain, NUMBER_OF_TICKS)
|
|
157
157
|
|
|
158
158
|
const categoryAxisProps = {
|
|
159
|
-
dataKey: labelKey
|
|
159
|
+
dataKey: labelKey,
|
|
160
160
|
height: TICK_HEIGHT,
|
|
161
161
|
interval: 0,
|
|
162
162
|
tick: { width: TICK_WIDTH },
|
|
@@ -171,6 +171,10 @@ const BarChart = <T extends string>({
|
|
|
171
171
|
const xAxisProps = horizontal ? categoryAxisProps : valueAxisProps
|
|
172
172
|
const yAxisProps = !horizontal ? categoryAxisProps : valueAxisProps
|
|
173
173
|
|
|
174
|
+
// If ticks are not shown, the corresponding axis is not rendered to avoid empty space
|
|
175
|
+
const renderXAxis = showEveryNthTickOnXAxis !== 0
|
|
176
|
+
const renderYAxis = showEveryNthTickOnYAxis !== 0
|
|
177
|
+
|
|
174
178
|
return (
|
|
175
179
|
<div style={{ height, width }} className={className} {...rest}>
|
|
176
180
|
<StyleOverrides />
|
|
@@ -190,24 +194,31 @@ const BarChart = <T extends string>({
|
|
|
190
194
|
stroke={palette.grey.lighter2}
|
|
191
195
|
vertical={!horizontal}
|
|
192
196
|
/>
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
197
|
+
|
|
198
|
+
{renderXAxis && (
|
|
199
|
+
<XAxis
|
|
200
|
+
{...xAxisProps}
|
|
201
|
+
type={horizontal ? 'category' : 'number'}
|
|
202
|
+
tickLine={TICK_LINE}
|
|
203
|
+
axisLine={AXIS_LINE}
|
|
204
|
+
minTickGap={MIN_TICK_GAP}
|
|
205
|
+
tickMargin={TICK_MARGIN}
|
|
206
|
+
interval={showEveryNthTickOnXAxis - 1}
|
|
207
|
+
/>
|
|
208
|
+
)}
|
|
209
|
+
|
|
210
|
+
{renderYAxis && (
|
|
211
|
+
<YAxis
|
|
212
|
+
{...yAxisProps}
|
|
213
|
+
type={horizontal ? 'number' : 'category'}
|
|
214
|
+
tickLine={TICK_LINE}
|
|
215
|
+
axisLine={AXIS_LINE}
|
|
216
|
+
minTickGap={MIN_TICK_GAP}
|
|
217
|
+
tickMargin={TICK_MARGIN}
|
|
218
|
+
interval={showEveryNthTickOnYAxis - 1}
|
|
219
|
+
/>
|
|
220
|
+
)}
|
|
221
|
+
|
|
211
222
|
{tooltipElement}
|
|
212
223
|
{dataKeys.map(dataKey => (
|
|
213
224
|
<Bar
|
|
@@ -254,6 +265,7 @@ BarChart.defaultProps = {
|
|
|
254
265
|
width: 'auto',
|
|
255
266
|
tooltip: false,
|
|
256
267
|
showBarLabel: true,
|
|
268
|
+
labelKey: 'name',
|
|
257
269
|
layout: 'horizontal',
|
|
258
270
|
}
|
|
259
271
|
|
|
@@ -65,7 +65,8 @@ page
|
|
|
65
65
|
takeScreenshot: false,
|
|
66
66
|
})
|
|
67
67
|
.addExample('BarChart/story/ShowEveryNthTick.example.tsx', {
|
|
68
|
-
title:
|
|
68
|
+
title:
|
|
69
|
+
'Show every Nth tick on X or Y-axis (or hide axis labels completely)',
|
|
69
70
|
description: `You can show every Nth tick for X-axis or Y-axis. "0" hides all ticks, "1" shows all ticks (default behavior). The example below has "showEveryNthTickOnXAxis={3}" (every third tick is shown on X-axis) and "showEveryNthTickOnYAxis={0}" (no ticks are shown on Y-axis).`,
|
|
70
71
|
takeScreenshot: false,
|
|
71
72
|
})
|
package/LICENSE
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2021-2022 Toptal, LLC
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
6
|
-
this software and associated documentation files (the “Software”), to deal in
|
|
7
|
-
the Software without restriction, including without limitation the rights to
|
|
8
|
-
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
9
|
-
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
10
|
-
subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
17
|
-
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
18
|
-
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
19
|
-
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
20
|
-
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|