@mozaic-ds/chart 0.1.0-beta.11 → 0.1.0-beta.13
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/mozaic-chart.js +586 -602
- package/dist/mozaic-chart.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/line/LineChart.vue +1 -1
- package/src/components/mixed/MixedBarLineChart.stories.ts +4 -3
- package/src/components/mixed/MixedBarLineChart.vue +34 -30
- package/src/components/radar/RadarChart.vue +1 -1
- package/src/services/ChartsCommonLegend.ts +7 -11
- package/src/services/MixedBarLineFunctions.ts +8 -28
- package/src/types/MixedBarLineData.ts +6 -6
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-fae6dcc9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-fae6dcc9]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f73f105]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f73f105]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-
|
|
1
|
+
.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-fae6dcc9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-fae6dcc9]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f73f105]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f73f105]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-d99146c4]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d99146c4]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-e59323c3]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-e59323c3]{display:flex;flex-direction:column;justify-content:center;align-items:center}.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #666666;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.container[data-v-758cd368]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-758cd368]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}
|
package/package.json
CHANGED
|
@@ -244,7 +244,7 @@ function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref) {
|
|
|
244
244
|
);
|
|
245
245
|
let liContent: HTMLElement;
|
|
246
246
|
if (!selectMode.value) {
|
|
247
|
-
liContent = createLegendElementWithSquareArea(item
|
|
247
|
+
liContent = createLegendElementWithSquareArea(item);
|
|
248
248
|
} else {
|
|
249
249
|
liContent = createLegendElementWithCheckbox(chart, item);
|
|
250
250
|
}
|
|
@@ -20,6 +20,8 @@ export const Default = {
|
|
|
20
20
|
disableAccessibility: false,
|
|
21
21
|
newPatternsOrder: [0, 1, 0, 1, 2, 3],
|
|
22
22
|
colourSet: 0,
|
|
23
|
+
barUnit: '',
|
|
24
|
+
lineUnit: '€',
|
|
23
25
|
barDatasets: [
|
|
24
26
|
{
|
|
25
27
|
type: 'bar',
|
|
@@ -38,7 +40,6 @@ export const Default = {
|
|
|
38
40
|
},
|
|
39
41
|
],
|
|
40
42
|
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
|
|
41
|
-
unit: '%',
|
|
42
43
|
},
|
|
43
44
|
} satisfies Story;
|
|
44
45
|
|
|
@@ -51,6 +52,7 @@ export const Multiple_Data = {
|
|
|
51
52
|
disableAccessibility: false,
|
|
52
53
|
newPatternsOrder: [0, 1, 0, 1, 2, 3],
|
|
53
54
|
colourSet: 0,
|
|
55
|
+
lineUnit: '€',
|
|
54
56
|
barDatasets: [
|
|
55
57
|
{
|
|
56
58
|
type: 'bar',
|
|
@@ -71,7 +73,7 @@ export const Multiple_Data = {
|
|
|
71
73
|
{
|
|
72
74
|
type: 'line',
|
|
73
75
|
label: 'Line Label 1',
|
|
74
|
-
data: [
|
|
76
|
+
data: [50, 150, 20, 250],
|
|
75
77
|
borderColor: 'rgb(54, 162, 235)',
|
|
76
78
|
},
|
|
77
79
|
{
|
|
@@ -82,6 +84,5 @@ export const Multiple_Data = {
|
|
|
82
84
|
},
|
|
83
85
|
],
|
|
84
86
|
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
|
|
85
|
-
unit: '%',
|
|
86
87
|
},
|
|
87
88
|
} satisfies Story;
|
|
@@ -53,13 +53,8 @@ ChartJS.register(
|
|
|
53
53
|
PointElement
|
|
54
54
|
);
|
|
55
55
|
|
|
56
|
-
const {
|
|
57
|
-
|
|
58
|
-
getOnHoverOptions,
|
|
59
|
-
getMixedDatasets,
|
|
60
|
-
reloadChart,
|
|
61
|
-
onHoverIndex,
|
|
62
|
-
} = mixedBarLineFunctions();
|
|
56
|
+
const { privateGetHtmlLegendPlugin, getMixedDatasets } =
|
|
57
|
+
mixedBarLineFunctions();
|
|
63
58
|
|
|
64
59
|
const { colourSets, patternsStandardList } = ChartDesign();
|
|
65
60
|
|
|
@@ -114,6 +109,13 @@ const mixedBarLineDataProps = defineProps({
|
|
|
114
109
|
type: Array as PropType<MixedBarLineData[]>,
|
|
115
110
|
default: () => [],
|
|
116
111
|
},
|
|
112
|
+
/**
|
|
113
|
+
* Unit of the `bar datasets`
|
|
114
|
+
*/
|
|
115
|
+
barUnit: {
|
|
116
|
+
type: String,
|
|
117
|
+
default: '',
|
|
118
|
+
},
|
|
117
119
|
/**
|
|
118
120
|
* Value of the `line datasets` key present in the `data` object passed to the Chart config
|
|
119
121
|
*/
|
|
@@ -121,6 +123,13 @@ const mixedBarLineDataProps = defineProps({
|
|
|
121
123
|
type: Array as PropType<MixedBarLineData[]>,
|
|
122
124
|
default: () => [],
|
|
123
125
|
},
|
|
126
|
+
/**
|
|
127
|
+
* Unit of the `line datasets`
|
|
128
|
+
*/
|
|
129
|
+
lineUnit: {
|
|
130
|
+
type: String,
|
|
131
|
+
default: '',
|
|
132
|
+
},
|
|
124
133
|
/**
|
|
125
134
|
* Value of the `width` css property used to define the width of the <canvas> element
|
|
126
135
|
*/
|
|
@@ -259,12 +268,16 @@ const chartData = computed(() => {
|
|
|
259
268
|
const getTooltipData = (context: Context) => {
|
|
260
269
|
const datasetIndex = context.tooltip.dataPoints[0].datasetIndex as number;
|
|
261
270
|
const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
|
|
262
|
-
const
|
|
263
|
-
const
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
271
|
+
const rawdata: number = chartDatasets.value[datasetIndex].data[dataIndex];
|
|
272
|
+
const amountUnit =
|
|
273
|
+
chartDatasets.value[datasetIndex].type === 'bar'
|
|
274
|
+
? mixedBarLineDataProps.barUnit
|
|
275
|
+
: mixedBarLineDataProps.lineUnit;
|
|
276
|
+
const data =
|
|
277
|
+
amountUnit === '%'
|
|
278
|
+
? parseFloat(rawdata.toString().replace(',', '.')).toFixed(2)
|
|
279
|
+
: formatWithThousandsSeprators(rawdata);
|
|
280
|
+
return data + amountUnit;
|
|
268
281
|
};
|
|
269
282
|
|
|
270
283
|
const getChartLabels = () => {
|
|
@@ -274,7 +287,6 @@ const getChartLabels = () => {
|
|
|
274
287
|
};
|
|
275
288
|
|
|
276
289
|
const options = computed(() => ({
|
|
277
|
-
onHover: getOnHoverOptions(),
|
|
278
290
|
type: 'scatter',
|
|
279
291
|
responsive: true,
|
|
280
292
|
maintainAspectRatio: true,
|
|
@@ -329,11 +341,11 @@ const options = computed(() => ({
|
|
|
329
341
|
},
|
|
330
342
|
ticks: {
|
|
331
343
|
callback: function (val: string | number) {
|
|
332
|
-
return mixedBarLineDataProps.
|
|
344
|
+
return mixedBarLineDataProps.barUnit === '%'
|
|
333
345
|
? formatTicks(val as number, mixedBarLineDataProps.unit)
|
|
334
346
|
: formatWithThousandsSeprators(val as number) +
|
|
335
347
|
' ' +
|
|
336
|
-
mixedBarLineDataProps.
|
|
348
|
+
mixedBarLineDataProps.barUnit;
|
|
337
349
|
},
|
|
338
350
|
},
|
|
339
351
|
},
|
|
@@ -350,13 +362,13 @@ const options = computed(() => ({
|
|
|
350
362
|
},
|
|
351
363
|
ticks: {
|
|
352
364
|
callback: function (val: string | number) {
|
|
353
|
-
return
|
|
354
|
-
|
|
365
|
+
return (
|
|
366
|
+
(mixedBarLineDataProps.lineUnit === '%'
|
|
355
367
|
? formatTicks(val as number, mixedBarLineDataProps.unit)
|
|
356
|
-
: formatWithThousandsSeprators(val as number) +
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
368
|
+
: formatWithThousandsSeprators(val as number)) +
|
|
369
|
+
' ' +
|
|
370
|
+
mixedBarLineDataProps.lineUnit
|
|
371
|
+
);
|
|
360
372
|
},
|
|
361
373
|
},
|
|
362
374
|
},
|
|
@@ -372,14 +384,6 @@ const htmlLegendPlugin = ref(
|
|
|
372
384
|
patternsOrderedList
|
|
373
385
|
)
|
|
374
386
|
);
|
|
375
|
-
|
|
376
|
-
watch(
|
|
377
|
-
onHoverIndex,
|
|
378
|
-
() => {
|
|
379
|
-
reloadChart();
|
|
380
|
-
},
|
|
381
|
-
{ deep: true }
|
|
382
|
-
);
|
|
383
387
|
</script>
|
|
384
388
|
|
|
385
389
|
<style lang="scss">
|
|
@@ -323,7 +323,7 @@ const radarPlugins = [
|
|
|
323
323
|
let liContent;
|
|
324
324
|
li.style.marginRight = '0.625rem';
|
|
325
325
|
if (!selectMode.value) {
|
|
326
|
-
liContent = createLegendElementWithSquareArea(item,
|
|
326
|
+
liContent = createLegendElementWithSquareArea(item, true);
|
|
327
327
|
} else {
|
|
328
328
|
liContent = createLegendElementWithCheckbox(chart, item);
|
|
329
329
|
}
|
|
@@ -169,9 +169,11 @@ export function createLegendElementWithPatterns
|
|
|
169
169
|
|
|
170
170
|
boxSpan.onmouseover = ():void => {
|
|
171
171
|
isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
|
|
172
|
+
chart.update();
|
|
172
173
|
};
|
|
173
174
|
boxSpan.onmouseleave = (): void => {
|
|
174
|
-
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex =
|
|
175
|
+
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
|
|
176
|
+
chart.update();
|
|
175
177
|
};
|
|
176
178
|
return boxSpan;
|
|
177
179
|
}
|
|
@@ -193,9 +195,11 @@ export function createLegendElementWithCheckbox
|
|
|
193
195
|
}
|
|
194
196
|
checkbox.onmouseover = ():void => {
|
|
195
197
|
isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
|
|
198
|
+
chart.update();
|
|
196
199
|
};
|
|
197
200
|
checkbox.onmouseleave = (): void => {
|
|
198
|
-
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex =
|
|
201
|
+
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
|
|
202
|
+
chart.update();
|
|
199
203
|
};
|
|
200
204
|
return checkbox;
|
|
201
205
|
}
|
|
@@ -334,7 +338,7 @@ export function switchItemVisibility (chart: Chart, elementIndex: number, select
|
|
|
334
338
|
}
|
|
335
339
|
|
|
336
340
|
|
|
337
|
-
export function createLegendElementWithSquareArea (item: ChartItem,
|
|
341
|
+
export function createLegendElementWithSquareArea (item: ChartItem, mainSerieFirstDataset?: boolean,) {
|
|
338
342
|
const liContent = createHtmlLegendLine(item, '');
|
|
339
343
|
const divPoint = createHtmlLegendDatasetSquare(item);
|
|
340
344
|
const index = item.index || item.datasetIndex;
|
|
@@ -346,14 +350,6 @@ export function createLegendElementWithSquareArea (item: ChartItem, onHoverIndex
|
|
|
346
350
|
} else {
|
|
347
351
|
mainSerieFirstDataset ? divPoint.style.transform = 'rotate(45deg)' : divPoint.style.borderRadius = '25px';
|
|
348
352
|
}
|
|
349
|
-
if (onHoverIndex) {
|
|
350
|
-
liContent.onmouseover = ():void => {
|
|
351
|
-
onHoverIndex.dataSetIndex = index;
|
|
352
|
-
};
|
|
353
|
-
liContent.onmouseleave = (): void => {
|
|
354
|
-
onHoverIndex.dataSetIndex = null;
|
|
355
|
-
};
|
|
356
|
-
}
|
|
357
353
|
liContent.appendChild(divPoint);
|
|
358
354
|
return liContent;
|
|
359
355
|
}
|
|
@@ -40,7 +40,7 @@ export default function () {
|
|
|
40
40
|
color: string,
|
|
41
41
|
disableAccessibility: boolean
|
|
42
42
|
) => CanvasPattern)[]
|
|
43
|
-
|
|
43
|
+
>
|
|
44
44
|
): HTMLLegendPlugin[] {
|
|
45
45
|
return [
|
|
46
46
|
{
|
|
@@ -68,12 +68,12 @@ export default function () {
|
|
|
68
68
|
let liContent: HTMLElement;
|
|
69
69
|
if (!selectMode.value) {
|
|
70
70
|
if (item?.lineCap) {
|
|
71
|
-
liContent = createLegendElementWithSquareArea(item
|
|
71
|
+
liContent = createLegendElementWithSquareArea(item);
|
|
72
72
|
} else {
|
|
73
73
|
liContent = createLegendElementWithPatterns(
|
|
74
74
|
item,
|
|
75
75
|
chart,
|
|
76
|
-
|
|
76
|
+
-1,
|
|
77
77
|
disableAccessibility.value,
|
|
78
78
|
patternsColors.value,
|
|
79
79
|
patternsList.value
|
|
@@ -84,7 +84,7 @@ export default function () {
|
|
|
84
84
|
chart,
|
|
85
85
|
item,
|
|
86
86
|
selectMode,
|
|
87
|
-
|
|
87
|
+
-1,
|
|
88
88
|
disableAccessibility.value
|
|
89
89
|
);
|
|
90
90
|
}
|
|
@@ -122,31 +122,11 @@ export default function () {
|
|
|
122
122
|
);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
function getOnHoverOptions() {
|
|
126
|
-
return (
|
|
127
|
-
_ignore: unknown,
|
|
128
|
-
activeElements: Array<{ index: number; datasetIndex: number }>
|
|
129
|
-
) => {
|
|
130
|
-
if (activeElements[0] !== undefined) {
|
|
131
|
-
onHoverIndex.dataSetIndex = activeElements[0].datasetIndex;
|
|
132
|
-
onHoverIndex.columnIndex = activeElements[0].index;
|
|
133
|
-
} else {
|
|
134
|
-
resetOnHoverIndex();
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
|
|
139
125
|
function resetOnHoverIndex() {
|
|
140
126
|
onHoverIndex.dataSetIndex = -1;
|
|
141
127
|
onHoverIndex.columnIndex = -1;
|
|
142
128
|
}
|
|
143
129
|
|
|
144
|
-
// Hack to force the chart to reload on Hover
|
|
145
|
-
function reloadChart() {
|
|
146
|
-
borderWidth.value = 3;
|
|
147
|
-
borderWidth.value = 2;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
130
|
function getMixedDatasets(
|
|
151
131
|
datasets: Dataset[],
|
|
152
132
|
disableAccessibility: boolean,
|
|
@@ -170,12 +150,14 @@ export default function () {
|
|
|
170
150
|
borderColor: function (context: any) {
|
|
171
151
|
return disableAccessibility
|
|
172
152
|
? '#00000000'
|
|
173
|
-
:
|
|
153
|
+
: dataset.type === 'bar'
|
|
154
|
+
? getBorderColor(
|
|
174
155
|
index,
|
|
175
156
|
context.index,
|
|
176
157
|
patternsColors,
|
|
177
158
|
patternShifting
|
|
178
|
-
)
|
|
159
|
+
)
|
|
160
|
+
: patternsColors[index];
|
|
179
161
|
},
|
|
180
162
|
backgroundColor: function (context: any) {
|
|
181
163
|
return getPattern(
|
|
@@ -270,9 +252,7 @@ export default function () {
|
|
|
270
252
|
|
|
271
253
|
return {
|
|
272
254
|
privateGetHtmlLegendPlugin,
|
|
273
|
-
getOnHoverOptions,
|
|
274
255
|
getMixedDatasets,
|
|
275
|
-
reloadChart,
|
|
276
256
|
getBorderColor,
|
|
277
257
|
getPattern,
|
|
278
258
|
onHoverIndex,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface MixedBarLineData {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
2
|
+
type: any;
|
|
3
|
+
label: string;
|
|
4
|
+
data: number[];
|
|
5
|
+
borderColor: string;
|
|
6
|
+
backgroundColor?: string;
|
|
7
|
+
}
|