@mozaic-ds/chart 0.1.0-beta.17 → 0.1.0-beta.18
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 +1688 -1658
- package/dist/mozaic-chart.umd.cjs +9 -9
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/bar/BarChart.vue +15 -3
- package/src/components/doughnut/DoughnutChart.vue +23 -8
- package/src/services/BarChartFunctions.ts +2 -2
- package/src/services/ChartsCommonLegend.ts +47 -31
- package/src/services/DoughnutChartFunctions.ts +8 -5
- package/src/services/MixedBarLineFunctions.ts +4 -2
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-
|
|
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-98d7a612]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-98d7a612]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-b0907849]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-b0907849]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-a49082e5]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-a49082e5]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-e38e3f99]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-e38e3f99]{display:flex;flex-direction:column;justify-content:center;align-items:center}.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-2dbee7d5]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-2dbee7d5]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.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-cecd05d5]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-cecd05d5]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.chart-legend[data-v-cecd05d5]{display:flex;gap:4px;font-size:14px;align-items:center;margin:1.375rem 1.0625rem;color:#666}.bubble-icon[data-v-cecd05d5]{width:16px;height:16px}
|
package/package.json
CHANGED
|
@@ -141,6 +141,13 @@ const barDataProps = defineProps({
|
|
|
141
141
|
type: Boolean,
|
|
142
142
|
default: false,
|
|
143
143
|
},
|
|
144
|
+
/**
|
|
145
|
+
* Enable hover feature (may cause strange behavior when used with width and height in %)
|
|
146
|
+
*/
|
|
147
|
+
enableHoverFeature: {
|
|
148
|
+
type: Boolean,
|
|
149
|
+
default: false,
|
|
150
|
+
},
|
|
144
151
|
/**
|
|
145
152
|
* X axis title
|
|
146
153
|
*/
|
|
@@ -193,6 +200,10 @@ const disablePattern = computed(() => {
|
|
|
193
200
|
return barDataProps.disableAccessibility;
|
|
194
201
|
});
|
|
195
202
|
|
|
203
|
+
const enableHover = computed(() => {
|
|
204
|
+
return barDataProps.enableHoverFeature;
|
|
205
|
+
})
|
|
206
|
+
|
|
196
207
|
const {
|
|
197
208
|
onHoverIndex,
|
|
198
209
|
barChartRef,
|
|
@@ -285,7 +296,7 @@ const getChartLabels = (indexOfValueToHide: number | null) => {
|
|
|
285
296
|
|
|
286
297
|
const options = computed(() => ({
|
|
287
298
|
// eslint-disable-next-line
|
|
288
|
-
onHover: getOnHoverOptions(),
|
|
299
|
+
onHover: barDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
|
|
289
300
|
elements: {
|
|
290
301
|
bar: {
|
|
291
302
|
borderSkipped: false,
|
|
@@ -353,13 +364,14 @@ const options = computed(() => ({
|
|
|
353
364
|
},
|
|
354
365
|
}));
|
|
355
366
|
|
|
356
|
-
const htmlLegendPlugin =
|
|
367
|
+
const htmlLegendPlugin = computed(() =>
|
|
357
368
|
privateGetHtmlLegendPlugin(
|
|
358
369
|
legendContainer,
|
|
359
370
|
selectMode,
|
|
360
371
|
disablePattern,
|
|
361
372
|
patternsColors,
|
|
362
|
-
patternsOrderedList
|
|
373
|
+
patternsOrderedList,
|
|
374
|
+
enableHover
|
|
363
375
|
)
|
|
364
376
|
);
|
|
365
377
|
|
|
@@ -90,6 +90,13 @@ const doughnutDataProps = defineProps({
|
|
|
90
90
|
type: Boolean,
|
|
91
91
|
default: false,
|
|
92
92
|
},
|
|
93
|
+
/**
|
|
94
|
+
* Enable hover feature (may cause strange behavior when used with width and height in %)
|
|
95
|
+
*/
|
|
96
|
+
enableHoverFeature: {
|
|
97
|
+
type: Boolean,
|
|
98
|
+
default: false,
|
|
99
|
+
},
|
|
93
100
|
/**
|
|
94
101
|
* Used to choose the colour set of the charts as defined in the Figma prototypes.
|
|
95
102
|
* 7 colour sets are currently defined:
|
|
@@ -187,9 +194,10 @@ const doughnutChartData = computed<any>(() => {
|
|
|
187
194
|
backgroundColor: getBackgroundColor(
|
|
188
195
|
patternsColors.value,
|
|
189
196
|
patternsOrderedList.value,
|
|
190
|
-
doughnutDataProps.disableAccessibility
|
|
197
|
+
doughnutDataProps.disableAccessibility,
|
|
198
|
+
doughnutDataProps.enableHoverFeature
|
|
191
199
|
),
|
|
192
|
-
borderColor: getBorderColor(patternsColors.value),
|
|
200
|
+
borderColor: getBorderColor(patternsColors.value, doughnutDataProps.enableHoverFeature),
|
|
193
201
|
},
|
|
194
202
|
],
|
|
195
203
|
};
|
|
@@ -216,7 +224,7 @@ const options = computed(() => {
|
|
|
216
224
|
const colors = patternsColors.value;
|
|
217
225
|
const patterns = patternsOrderedList.value;
|
|
218
226
|
return {
|
|
219
|
-
onHover: getOnHoverOptions(),
|
|
227
|
+
onHover: doughnutDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
|
|
220
228
|
plugins: {
|
|
221
229
|
legend: {
|
|
222
230
|
display: false,
|
|
@@ -265,6 +273,9 @@ const doughnutDataAndLabels = {
|
|
|
265
273
|
const disablePattern = computed(() => {
|
|
266
274
|
return doughnutDataProps.disableAccessibility;
|
|
267
275
|
});
|
|
276
|
+
const enableHover = computed(() => {
|
|
277
|
+
return doughnutDataProps.enableHoverFeature;
|
|
278
|
+
})
|
|
268
279
|
|
|
269
280
|
const htmlLegendPlugin = computed(() =>
|
|
270
281
|
privateGetHtmlLegendPlugin(
|
|
@@ -274,7 +285,8 @@ const htmlLegendPlugin = computed(() =>
|
|
|
274
285
|
patternsColors,
|
|
275
286
|
patternsOrderedList,
|
|
276
287
|
doughnutDataProps.maxValues,
|
|
277
|
-
doughnutDataAndLabels
|
|
288
|
+
doughnutDataAndLabels,
|
|
289
|
+
enableHover
|
|
278
290
|
)
|
|
279
291
|
);
|
|
280
292
|
|
|
@@ -282,15 +294,17 @@ onMounted(() => {
|
|
|
282
294
|
getBackgroundColor(
|
|
283
295
|
patternsColors.value,
|
|
284
296
|
patternsOrderedList.value,
|
|
285
|
-
doughnutDataProps.disableAccessibility
|
|
297
|
+
doughnutDataProps.disableAccessibility,
|
|
298
|
+
enableHover.value
|
|
286
299
|
);
|
|
287
300
|
});
|
|
288
301
|
watch(onHoverIndex, (newValue, oldValue) => {
|
|
289
|
-
if (newValue !== oldValue) {
|
|
302
|
+
if (newValue !== oldValue && enableHover.value) {
|
|
290
303
|
getBackgroundColor(
|
|
291
304
|
patternsColors.value,
|
|
292
305
|
patternsOrderedList.value,
|
|
293
|
-
doughnutDataProps.disableAccessibility
|
|
306
|
+
doughnutDataProps.disableAccessibility,
|
|
307
|
+
enableHover.value
|
|
294
308
|
);
|
|
295
309
|
}
|
|
296
310
|
});
|
|
@@ -299,7 +313,8 @@ watch(disablePattern, () => {
|
|
|
299
313
|
getBackgroundColor(
|
|
300
314
|
patternsColors.value,
|
|
301
315
|
patternsOrderedList.value,
|
|
302
|
-
doughnutDataProps.disableAccessibility
|
|
316
|
+
doughnutDataProps.disableAccessibility,
|
|
317
|
+
enableHover.value
|
|
303
318
|
);
|
|
304
319
|
});
|
|
305
320
|
</script>
|
|
@@ -24,8 +24,8 @@ export default function () {
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>) {
|
|
28
|
-
return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility,
|
|
27
|
+
function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, enableHoverFeature: Ref<boolean>) {
|
|
28
|
+
return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList, enableHoverFeature);
|
|
29
29
|
}
|
|
30
30
|
// Hack to force the chart to reload on Hover
|
|
31
31
|
function reloadChart () {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
1
|
+
import type {Ref} from 'vue';
|
|
2
|
+
import type {HTMLLegendPlugin} from "../types/Chart";
|
|
3
|
+
import type {ChartOptions} from 'chart.js';
|
|
4
4
|
import PatternFunctions from './PatternFunctions';
|
|
5
|
-
import {
|
|
5
|
+
import {formatValueAndRate} from './FormatUtilities';
|
|
6
6
|
import QuestionMarkSvg from '@mozaic-ds/icons/svg/Navigation_Notification_Question_24px.svg';
|
|
7
7
|
|
|
8
8
|
const { getPatternCanvas } = PatternFunctions();
|
|
@@ -43,7 +43,7 @@ export interface ChartItem {
|
|
|
43
43
|
lineCap?: string;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, onHoverIndex: any, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
|
|
46
|
+
export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, onHoverIndex: any, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, enableHoverFeature: Ref<boolean>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
|
|
47
47
|
return [{
|
|
48
48
|
id: 'htmlLegend',
|
|
49
49
|
afterUpdate (chart: any) {
|
|
@@ -72,9 +72,9 @@ export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolea
|
|
|
72
72
|
li.style.cursor = 'pointer';
|
|
73
73
|
let liContent: HTMLElement;
|
|
74
74
|
if (!selectMode.value) {
|
|
75
|
-
liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value);
|
|
75
|
+
liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value, enableHoverFeature.value);
|
|
76
76
|
} else {
|
|
77
|
-
liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value);
|
|
77
|
+
liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value, enableHoverFeature.value);
|
|
78
78
|
}
|
|
79
79
|
liContent.style.boxSizing = 'border-box';
|
|
80
80
|
li.appendChild(liContent);
|
|
@@ -108,6 +108,9 @@ export function createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: n
|
|
|
108
108
|
icon.onmouseover = () => {
|
|
109
109
|
(iconWrapper.firstElementChild as HTMLElement).style.visibility = 'visible';
|
|
110
110
|
};
|
|
111
|
+
icon.onmouseleave = () => {
|
|
112
|
+
(iconWrapper.firstElementChild as HTMLElement).style.visibility = 'hidden';
|
|
113
|
+
};
|
|
111
114
|
iconTopWrapper.appendChild(iconWrapper);
|
|
112
115
|
iconWrapper.appendChild(tooltip);
|
|
113
116
|
iconWrapper.appendChild(icon);
|
|
@@ -153,7 +156,7 @@ doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
|
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
export function createLegendElementWithPatterns
|
|
156
|
-
(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[])
|
|
159
|
+
(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], enableHoverFeature: boolean)
|
|
157
160
|
: HTMLElement {
|
|
158
161
|
const isDoughnut: boolean = chart.config.type === 'doughnut';
|
|
159
162
|
const index: number = isDoughnut ? item.index : item.datasetIndex;
|
|
@@ -167,38 +170,42 @@ export function createLegendElementWithPatterns
|
|
|
167
170
|
boxSpan.style.borderColor = patternsColors[index];
|
|
168
171
|
boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
|
|
169
172
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
173
|
+
if (enableHoverFeature) {
|
|
174
|
+
boxSpan.onmouseover = ():void => {
|
|
175
|
+
isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
|
|
176
|
+
};
|
|
177
|
+
boxSpan.onmouseleave = (): void => {
|
|
178
|
+
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
|
|
179
|
+
};
|
|
180
|
+
}
|
|
176
181
|
return boxSpan;
|
|
177
182
|
}
|
|
178
183
|
|
|
179
184
|
export function createLegendElementWithCheckbox
|
|
180
|
-
(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, patternsColors: string[]): HTMLElement {
|
|
185
|
+
(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, patternsColors: string[], enableHoverFeature: boolean): HTMLElement {
|
|
181
186
|
const isDoughnut: boolean = chart.config.type === 'doughnut';
|
|
182
187
|
const index: number = isDoughnut ? item.index : item.datasetIndex;
|
|
183
188
|
const checkbox: HTMLElement = createLegendCheckbox(chart, item, patternsColors);
|
|
184
189
|
const labels = chart.config.data.labels;
|
|
185
190
|
const allCheckBoxesVisible: boolean =
|
|
186
191
|
labels.every((label: string, index: number) => chart.getDataVisibility(index));
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
192
|
+
if (allCheckBoxesVisible) {
|
|
193
|
+
if (isDoughnut) {
|
|
194
|
+
selectMode.value = false;
|
|
195
|
+
onHoverIndex.value = -1;
|
|
196
|
+
}
|
|
197
|
+
return checkbox;
|
|
191
198
|
}
|
|
192
|
-
|
|
199
|
+
if (enableHoverFeature) {
|
|
200
|
+
checkbox.onmouseover = ():void => {
|
|
201
|
+
isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
|
|
202
|
+
chart.update();
|
|
203
|
+
};
|
|
204
|
+
checkbox.onmouseleave = (): void => {
|
|
205
|
+
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
|
|
206
|
+
chart.update();
|
|
207
|
+
};
|
|
193
208
|
}
|
|
194
|
-
checkbox.onmouseover = ():void => {
|
|
195
|
-
isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
|
|
196
|
-
chart.update();
|
|
197
|
-
};
|
|
198
|
-
checkbox.onmouseleave = (): void => {
|
|
199
|
-
isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
|
|
200
|
-
chart.update();
|
|
201
|
-
};
|
|
202
209
|
return checkbox;
|
|
203
210
|
}
|
|
204
211
|
|
|
@@ -269,8 +276,8 @@ export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, ch
|
|
|
269
276
|
//Default white for patterns chart
|
|
270
277
|
backgroundColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
|
|
271
278
|
borderColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
|
|
279
|
+
checkbox.setAttribute('checked', '' + isDataSetVisible);
|
|
272
280
|
}
|
|
273
|
-
checkbox.setAttribute('checked', '' + isDataSetVisible);
|
|
274
281
|
checkbox.setAttribute('class', 'mc-checkbox__input');
|
|
275
282
|
checkbox.setAttribute('style', `background-color: ${backgroundColor};
|
|
276
283
|
width: ${LEGEND_BOX_SIZE};
|
|
@@ -285,7 +292,7 @@ export function createLegendCheckbox (chart: Chart, item: ChartItem, patternsCol
|
|
|
285
292
|
const checkbox = document.createElement('input');
|
|
286
293
|
checkbox.setAttribute('type', 'checkbox');
|
|
287
294
|
checkbox.setAttribute('data-test-id', `legend-checkbox-${index}`);
|
|
288
|
-
const isDataSetVisible =
|
|
295
|
+
const isDataSetVisible = isChartDataVisible(chart, index);
|
|
289
296
|
const patternColor = patternsColors? patternsColors[index]:undefined;
|
|
290
297
|
addCheckboxStyle(isDataSetVisible, item, checkbox, patternColor as string);
|
|
291
298
|
return checkbox;
|
|
@@ -320,17 +327,26 @@ function allDataVisible (chart: Chart): boolean {
|
|
|
320
327
|
let allVisible = true;
|
|
321
328
|
const chartsData: unknown[] = getChartsData(chart);
|
|
322
329
|
chartsData.forEach((_data, dataIndex) => {
|
|
323
|
-
allVisible = allVisible && chart
|
|
330
|
+
allVisible = allVisible && isChartDataVisible(chart, dataIndex);
|
|
324
331
|
});
|
|
325
332
|
return allVisible;
|
|
326
333
|
}
|
|
327
334
|
|
|
335
|
+
function isChartDataVisible(chart: Chart, dataIndex: number): boolean {
|
|
336
|
+
if (isMonoDataSetChart(chart)) {
|
|
337
|
+
return chart.getDataVisibility(dataIndex);
|
|
338
|
+
} else {
|
|
339
|
+
return chart.isDatasetVisible(dataIndex);
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
|
|
328
343
|
export function switchItemVisibility (chart: Chart, elementIndex: number, selectMode?: Ref) {
|
|
329
344
|
if (isMonoDataSetChart(chart)) {
|
|
330
345
|
chart.toggleDataVisibility(elementIndex);
|
|
331
346
|
} else {
|
|
332
347
|
chart.setDatasetVisibility(elementIndex, !chart.isDatasetVisible(elementIndex));
|
|
333
348
|
}
|
|
349
|
+
|
|
334
350
|
if (selectMode && allDataVisible(chart)) {
|
|
335
351
|
selectMode.value = false;
|
|
336
352
|
}
|
|
@@ -23,7 +23,8 @@ export default function () {
|
|
|
23
23
|
) => CanvasPattern)[]
|
|
24
24
|
>,
|
|
25
25
|
maxValueToDisplay: number,
|
|
26
|
-
doughnutData: any
|
|
26
|
+
doughnutData: any,
|
|
27
|
+
enableHoverFeature: Ref<boolean>
|
|
27
28
|
) {
|
|
28
29
|
return getHtmlLegendPlugin(
|
|
29
30
|
legendContainer,
|
|
@@ -32,6 +33,7 @@ export default function () {
|
|
|
32
33
|
disableAccessibility,
|
|
33
34
|
patternsColors,
|
|
34
35
|
patternsList,
|
|
36
|
+
enableHoverFeature,
|
|
35
37
|
maxValueToDisplay,
|
|
36
38
|
doughnutData
|
|
37
39
|
);
|
|
@@ -44,9 +46,10 @@ export default function () {
|
|
|
44
46
|
color: string,
|
|
45
47
|
disableAccessibility: boolean
|
|
46
48
|
) => CanvasPattern)[],
|
|
47
|
-
disableAccessibility: boolean
|
|
49
|
+
disableAccessibility: boolean,
|
|
50
|
+
enableHoverFeature: boolean
|
|
48
51
|
) {
|
|
49
|
-
if (onHoverIndex.value !== null) {
|
|
52
|
+
if (onHoverIndex.value !== null && enableHoverFeature) {
|
|
50
53
|
return patternsList.map((pattern, index) =>
|
|
51
54
|
onHoverIndex.value === index
|
|
52
55
|
? pattern(false, patternsColors[index], disableAccessibility)
|
|
@@ -59,8 +62,8 @@ export default function () {
|
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
|
|
62
|
-
function getBorderColor(patternsColors: string[]): string[] {
|
|
63
|
-
if (onHoverIndex.value !== null) {
|
|
65
|
+
function getBorderColor(patternsColors: string[], enableHoverFeature: boolean): string[] {
|
|
66
|
+
if (onHoverIndex.value !== null && enableHoverFeature) {
|
|
64
67
|
return patternsColors.map((color, index) =>
|
|
65
68
|
onHoverIndex.value === index ? color : addAlpha(color, 0.2)
|
|
66
69
|
);
|
|
@@ -76,7 +76,8 @@ export default function () {
|
|
|
76
76
|
{ datasetIndex: -1 },
|
|
77
77
|
disableAccessibility.value,
|
|
78
78
|
patternsColors.value,
|
|
79
|
-
patternsList.value
|
|
79
|
+
patternsList.value,
|
|
80
|
+
false
|
|
80
81
|
);
|
|
81
82
|
}
|
|
82
83
|
} else {
|
|
@@ -85,7 +86,8 @@ export default function () {
|
|
|
85
86
|
item,
|
|
86
87
|
selectMode,
|
|
87
88
|
{ datasetIndex: -1 },
|
|
88
|
-
patternsColors.value
|
|
89
|
+
patternsColors.value,
|
|
90
|
+
false
|
|
89
91
|
);
|
|
90
92
|
}
|
|
91
93
|
liContent.style.boxSizing = 'border-box';
|