@mozaic-ds/chart 0.1.0-beta.26 → 0.1.0-beta.27
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 +681 -697
- package/dist/mozaic-chart.umd.cjs +8 -8
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/radar/RadarChart.vue +17 -31
- package/src/services/ChartsCommonLegend.ts +4 -4
- package/src/services/MixedBarLineFunctions.ts +1 -1
- package/src/services/PatternFunctions.ts +3 -3
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-aaa6e255]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-aaa6e255]{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-8e74b12a]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-8e74b12a]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.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-aaa6e255]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-aaa6e255]{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-8e74b12a]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-8e74b12a]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-00cff15e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-00cff15e]{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-6a9cb065]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-6a9cb065]{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-a786496d]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-a786496d]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.chart-legend[data-v-a786496d]{display:flex;gap:4px;font-size:14px;align-items:center;margin:1.375rem 1.0625rem;color:#666}.bubble-icon[data-v-a786496d]{width:16px;height:16px}
|
package/package.json
CHANGED
|
@@ -162,42 +162,28 @@ const patternsOrderedList = computed(() =>
|
|
|
162
162
|
|
|
163
163
|
const radarData = computed<ChartData<'radar'>>(() => ({
|
|
164
164
|
labels: getRadarLabels(),
|
|
165
|
-
datasets:
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
pointHitRadius: 55,
|
|
175
|
-
pointRadius: 5,
|
|
176
|
-
pointHoverBackgroundColor: patternsColors.value[0],
|
|
177
|
-
pointHoverBorderColor: patternsColors.value[0],
|
|
178
|
-
data: radarComponentChartProps.datasets[0].areaData.map(
|
|
179
|
-
(x: { position: number }) => x.position
|
|
180
|
-
),
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
label: radarComponentChartProps.datasets[1].label,
|
|
184
|
-
backgroundColor: addAlpha(patternsColors.value[1], 0.1),
|
|
185
|
-
borderColor: patternsColors.value[1],
|
|
165
|
+
datasets: getDatasets(),
|
|
166
|
+
}));
|
|
167
|
+
|
|
168
|
+
function getDatasets() {
|
|
169
|
+
return radarComponentChartProps.datasets.map((dataset, index) => {
|
|
170
|
+
return {
|
|
171
|
+
label: dataset.label,
|
|
172
|
+
backgroundColor: addAlpha(patternsColors.value[index], 0.1),
|
|
173
|
+
borderColor: patternsColors.value[index],
|
|
186
174
|
pointBackgroundColor: '#FFFFFF',
|
|
187
|
-
pointBorderColor: patternsColors.value[
|
|
175
|
+
pointBorderColor: patternsColors.value[index],
|
|
188
176
|
pointBorderWidth: 2,
|
|
189
177
|
borderWidth: 2,
|
|
190
178
|
pointHitRadius: 55,
|
|
191
179
|
pointRadius: 5,
|
|
192
|
-
pointStyle: 'rectRot',
|
|
193
|
-
pointHoverBackgroundColor: patternsColors.value[
|
|
194
|
-
pointHoverBorderColor: patternsColors.value[
|
|
195
|
-
data:
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
],
|
|
200
|
-
}));
|
|
180
|
+
pointStyle: index % 2 === 0 ? 'circle' : 'rectRot',
|
|
181
|
+
pointHoverBackgroundColor: patternsColors.value[index],
|
|
182
|
+
pointHoverBorderColor: patternsColors.value[index],
|
|
183
|
+
data: dataset.areaData.map((x: { position: number }) => x.position),
|
|
184
|
+
};
|
|
185
|
+
});
|
|
186
|
+
}
|
|
201
187
|
|
|
202
188
|
const chartOptions: any = {
|
|
203
189
|
onClick: (
|
|
@@ -233,9 +233,9 @@ export function createHtmlLegendLine (item: ChartItem, type: string | undefined)
|
|
|
233
233
|
boxSpan.style.display = 'flex';
|
|
234
234
|
boxSpan.style.justifyContent = 'center';
|
|
235
235
|
boxSpan.style.alignItems = 'center';
|
|
236
|
-
boxSpan.style.
|
|
236
|
+
boxSpan.style.minWidth = LEGEND_BOX_SIZE;
|
|
237
237
|
boxSpan.style.marginRight = LEGEND_LABEL_LEFT_MARGIN;
|
|
238
|
-
boxSpan.style.
|
|
238
|
+
boxSpan.style.minHeight = LEGEND_BOX_SIZE;
|
|
239
239
|
return boxSpan;
|
|
240
240
|
}
|
|
241
241
|
|
|
@@ -280,8 +280,8 @@ export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, ch
|
|
|
280
280
|
}
|
|
281
281
|
checkbox.setAttribute('class', 'mc-checkbox__input');
|
|
282
282
|
checkbox.setAttribute('style', `background-color: ${backgroundColor};
|
|
283
|
-
width: ${LEGEND_BOX_SIZE};
|
|
284
|
-
height: ${LEGEND_BOX_SIZE};
|
|
283
|
+
min-width: ${LEGEND_BOX_SIZE};
|
|
284
|
+
min-height: ${LEGEND_BOX_SIZE};
|
|
285
285
|
margin-right: ${LEGEND_LABEL_LEFT_MARGIN};
|
|
286
286
|
border-color: ${borderColor};`);
|
|
287
287
|
}
|
|
@@ -13,9 +13,9 @@ export default function () {
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
function getPatternIndexWithShift (dataSetIndex: number, patternShifting?: number) {
|
|
16
|
-
return patternShifting
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
return (patternShifting
|
|
17
|
+
? dataSetIndex + patternShifting
|
|
18
|
+
: dataSetIndex) % 6;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
return {
|