@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/PlChartHistogram/PlChartHistogram.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { createHistogramFromBins, createHistogramLinear, createHistogramLog } from './histogram';
-import type { ChartOptions, PlChartHistogramSettings } from './types';
+import { computed, onMounted, ref, watch } from "vue";
+import { createHistogramFromBins, createHistogramLinear, createHistogramLog } from "./histogram";
+import type { ChartOptions, PlChartHistogramSettings } from "./types";
 
 const props = defineProps<{
   settings: PlChartHistogramSettings;
@@ -10,9 +10,18 @@ const props = defineProps<{
 const chart = ref<HTMLElement>();
 
 const options = computed<ChartOptions>(() => {
-  const { xAxisLabel, yAxisLabel, threshold, compact, totalWidth = 674, totalHeight = 252 } = props.settings;
+  const {
+    xAxisLabel,
+    yAxisLabel,
+    threshold,
+    compact,
+    totalWidth = 674,
+    totalHeight = 252,
+  } = props.settings;
 
-  const margin = compact ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: 0, right: 30, bottom: 40, left: 85 };
+  const margin = compact
+    ? { top: 0, right: 0, bottom: 0, left: 0 }
+    : { top: 0, right: 30, bottom: 40, left: 85 };
   const width = totalWidth - margin.left - margin.right;
   const height = totalHeight - margin.top - margin.bottom;
 
@@ -21,7 +30,7 @@ const options = computed<ChartOptions>(() => {
     height,
     margin,
     compact,
-    nBins: 'nBins' in props.settings ? props.settings.nBins : 10,
+    nBins: "nBins" in props.settings ? props.settings.nBins : 10,
     xAxisLabel: xAxisLabel,
     yAxisLabel: yAxisLabel,
     threshold: threshold,
@@ -31,7 +40,7 @@ const options = computed<ChartOptions>(() => {
 const createHistogram = () => {
   const settings = props.settings;
 
-  if (settings.type === 'log-bins') {
+  if (settings.type === "log-bins") {
     createHistogramFromBins(chart.value!, options.value, settings.bins);
     return;
   }
@@ -73,18 +82,18 @@ onMounted(createHistogram);
 }
 
 :global(.svg-tooltip) {
-    font-family: var(--font-family-base);
-    background: rgba(69,77,93,.9);
-    border-radius: .1rem;
-    color: #fff;
-    display: block;
-    font-size: 14px;
-    max-width: 320px;
-    padding: .2rem .4rem;
-    position: absolute;
-    text-overflow: ellipsis;
-    white-space: pre;
-    z-index: 300;
-    visibility: hidden;
+  font-family: var(--font-family-base);
+  background: rgba(69, 77, 93, 0.9);
+  border-radius: 0.1rem;
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  max-width: 320px;
+  padding: 0.2rem 0.4rem;
+  position: absolute;
+  text-overflow: ellipsis;
+  white-space: pre;
+  z-index: 300;
+  visibility: hidden;
 }
 </style>

package/src/components/PlChartHistogram/createGridlines.ts

@@ -1,9 +1,9 @@
-import type { ChartOptions, Scales } from './types';
-import type { Selection } from 'd3-selection';
-import type { Axis } from 'd3-axis';
-import type { NumberValue } from 'd3-scale';
-import { selectAll } from 'd3-selection';
-import { axisBottom, axisLeft } from 'd3-axis';
+import type { ChartOptions, Scales } from "./types";
+import type { Selection } from "d3-selection";
+import type { Axis } from "d3-axis";
+import type { NumberValue } from "d3-scale";
+import { selectAll } from "d3-selection";
+import { axisBottom, axisLeft } from "d3-axis";
 
 export function createGridlines(
   svg: Selection<SVGGElement, unknown, null, undefined>,
@@ -22,25 +22,31 @@ export function createGridlines(
     return xTicks(axisBottom(scales.x));
   }
   // Append horizontal gridlines
-  svg.append('g')
-    .attr('class', 'grid') // Add a class for styling
-    .attr('font-family', '\'Manrope\', sans-serif') // Doesn't work
-    .call(makeYGridlines()
-      .tickSize(-width) // Extend gridlines across the chart width
-      .tickFormat(() => '')); // Remove tick labels
+  svg
+    .append("g")
+    .attr("class", "grid") // Add a class for styling
+    .attr("font-family", "'Manrope', sans-serif") // Doesn't work
+    .call(
+      makeYGridlines()
+        .tickSize(-width) // Extend gridlines across the chart width
+        .tickFormat(() => ""),
+    ); // Remove tick labels
 
   // Append vertical gridlines
-  svg.append('g')
-    .attr('class', 'grid') // Add a class for styling
-    .attr('font-family', '\'Manrope\', sans-serif')
-    .attr('transform', `translate(0,${height})`) // Position at the bottom of the chart
-    .call(makeXGridlines()
-      .tickSize(-height) // Extend gridlines across the chart height
-      .tickFormat(() => '')); // Remove tick labels
+  svg
+    .append("g")
+    .attr("class", "grid") // Add a class for styling
+    .attr("font-family", "'Manrope', sans-serif")
+    .attr("transform", `translate(0,${height})`) // Position at the bottom of the chart
+    .call(
+      makeXGridlines()
+        .tickSize(-height) // Extend gridlines across the chart height
+        .tickFormat(() => ""),
+    ); // Remove tick labels
 
   // Style the gridlines using CSS (or inline styles)
-  selectAll('.grid line')
-    .style('stroke', '#E1E3EB') // Light gray gridlines
+  selectAll(".grid line")
+    .style("stroke", "#E1E3EB") // Light gray gridlines
     // .style('stroke-dasharray', '2,2') // Dashed gridlines
-    .style('opacity', 0.7); // Slightly transparent
+    .style("opacity", 0.7); // Slightly transparent
 }

package/src/components/PlChartHistogram/createLabels.ts

@@ -1,5 +1,5 @@
-import type { Selection } from 'd3-selection';
-import type { ChartOptions } from './types';
+import type { Selection } from "d3-selection";
+import type { ChartOptions } from "./types";
 
 export function createLabels(
   svg: Selection<SVGGElement, unknown, null, undefined>,
@@ -12,21 +12,23 @@ export function createLabels(
   }
 
   // X-axis label
-  svg.append('text')
-    .attr('class', 'x-axis-label')
-    .attr('font-weight', 500)
-    .attr('text-anchor', 'middle') // Center the text
-    .attr('x', width / 2) // Center horizontally
-    .attr('y', height + margin.bottom - 5) // Position below the X-axis
-    .text(xAxisLabel ?? 'Value Range'); // Set your custom label text
+  svg
+    .append("text")
+    .attr("class", "x-axis-label")
+    .attr("font-weight", 500)
+    .attr("text-anchor", "middle") // Center the text
+    .attr("x", width / 2) // Center horizontally
+    .attr("y", height + margin.bottom - 5) // Position below the X-axis
+    .text(xAxisLabel ?? "Value Range"); // Set your custom label text
 
   // Y-axis label
-  svg.append('text')
-    .attr('class', 'y-axis-label')
-    .attr('font-weight', 500)
-    .attr('text-anchor', 'middle') // Center the text
-    .attr('x', -height / 2) // Center vertically (rotated axis)
-    .attr('y', -margin.left + 15) // Position to the left of the Y-axis
-    .attr('transform', 'rotate(-90)') // Rotate text 90 degrees counter-clockwise
-    .text(yAxisLabel ?? 'Frequency'); // Set your custom label text
+  svg
+    .append("text")
+    .attr("class", "y-axis-label")
+    .attr("font-weight", 500)
+    .attr("text-anchor", "middle") // Center the text
+    .attr("x", -height / 2) // Center vertically (rotated axis)
+    .attr("y", -margin.left + 15) // Position to the left of the Y-axis
+    .attr("transform", "rotate(-90)") // Rotate text 90 degrees counter-clockwise
+    .text(yAxisLabel ?? "Frequency"); // Set your custom label text
 }

package/src/components/PlChartHistogram/createSvgContainer.ts

@@ -1,5 +1,5 @@
-import type { ChartOptions } from './types';
-import { select } from 'd3-selection';
+import type { ChartOptions } from "./types";
+import { select } from "d3-selection";
 
 export function createSvgContainer(el: HTMLElement, options: ChartOptions) {
   const { width, height, margin, compact } = options;
@@ -7,16 +7,16 @@ export function createSvgContainer(el: HTMLElement, options: ChartOptions) {
   el.replaceChildren();
 
   if (compact) {
-    el.style.height = height + 'px';
-    el.style.lineHeight = height + 'px';
+    el.style.height = height + "px";
+    el.style.lineHeight = height + "px";
   }
 
   const svg = select(el) // Append the SVG element to the body
-    .append('svg')
-    .attr('width', width + margin.left + margin.right) // Set the total width
-    .attr('height', height + margin.top + margin.bottom) // Set the total height
-    .append('g') // Append a group to handle margins
-    .attr('transform', `translate(${margin.left},${margin.top})`);
+    .append("svg")
+    .attr("width", width + margin.left + margin.right) // Set the total width
+    .attr("height", height + margin.top + margin.bottom) // Set the total height
+    .append("g") // Append a group to handle margins
+    .attr("transform", `translate(${margin.left},${margin.top})`);
 
   return svg;
 }

package/src/components/PlChartHistogram/drawBins.ts

@@ -1,54 +1,47 @@
-import type { BinLike, ChartOptions, Scales, SVG } from './types';
-import { select } from 'd3-selection';
+import type { BinLike, ChartOptions, Scales, SVG } from "./types";
+import { select } from "d3-selection";
 
-export function drawBins(
-  svg: SVG,
-  bins: BinLike[],
-  dimension: ChartOptions,
-  scales: Scales,
-) {
+export function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, scales: Scales) {
   const { height } = dimension;
 
   const { x, y } = scales;
 
-  const tooltip = select('body')
-    .append('div')
-    .attr('class', 'svg-tooltip')
-    .style('position', 'absolute')
-    .style('visibility', 'hidden');
+  const tooltip = select("body")
+    .append("div")
+    .attr("class", "svg-tooltip")
+    .style("position", "absolute")
+    .style("visibility", "hidden");
 
   // Three function that change the tooltip when user hover / move / leave a cell
   const mouseover = function (_event: MouseEvent, d: BinLike) {
-    tooltip
-      .style('visibility', 'visible')
-      .text(`count: ${d.length}\nx0: ${d.x0}\nx1: ${d.x1}`);
+    tooltip.style("visibility", "visible").text(`count: ${d.length}\nx0: ${d.x0}\nx1: ${d.x1}`);
   };
 
   const mousemove = function (event: MouseEvent) {
-    tooltip
-      .style('top', event.pageY - 10 + 'px')
-      .style('left', event.pageX + 10 + 'px');
+    tooltip.style("top", event.pageY - 10 + "px").style("left", event.pageX + 10 + "px");
   };
 
   const mouseout = function () {
-    tooltip.style('visibility', 'hidden');
+    tooltip.style("visibility", "hidden");
   };
 
   // Add rectangles for the histogram bars
-  svg.selectAll('rect')
+  svg
+    .selectAll("rect")
     .data(bins)
     .enter()
-    .append('rect')
-    .attr('x', (d) => x(d.x0!)) // Position the bar based on the bin start
-    .attr('y', (d) => y(d.length)) // Height based on bin count
-    .attr('width', (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals
-    .attr('height', (d) => height - y(d.length)) // Invert height to fit SVG coordinate system
-    .style('fill', '#929BAD')
-    .attr('stroke', '#fff') // Border color
-    .attr('stroke-opacity', 0.2)
-    .attr('stroke-width', 0.5)
-    .on('mouseover', mouseover)
-    .on('mousemove', mousemove)
-    .on('mouseout', mouseout)
-    .append('title').text((d) => `[${d.x0}, ${d.x1}]\n` + d.length + '\n'); // Set bar color
+    .append("rect")
+    .attr("x", (d) => x(d.x0!)) // Position the bar based on the bin start
+    .attr("y", (d) => y(d.length)) // Height based on bin count
+    .attr("width", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals
+    .attr("height", (d) => height - y(d.length)) // Invert height to fit SVG coordinate system
+    .style("fill", "#929BAD")
+    .attr("stroke", "#fff") // Border color
+    .attr("stroke-opacity", 0.2)
+    .attr("stroke-width", 0.5)
+    .on("mouseover", mouseover)
+    .on("mousemove", mousemove)
+    .on("mouseout", mouseout)
+    .append("title")
+    .text((d) => `[${d.x0}, ${d.x1}]\n` + d.length + "\n"); // Set bar color
 }

package/src/components/PlChartHistogram/drawThreshold.ts

@@ -1,4 +1,4 @@
-import type { ChartOptions, Scales, SVG } from './types';
+import type { ChartOptions, Scales, SVG } from "./types";
 
 export function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {
   const { threshold } = options;
@@ -8,12 +8,12 @@ export function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {
   }
 
   svg
-    .append('line')
-    .attr('x1', scales.x(threshold))
-    .attr('x2', scales.x(threshold))
-    .attr('y1', 0)
-    .attr('y2', options.height)
-    .style('stroke', '#F05670')
-    .style('stroke-width', '1')
-    .style('stroke-dasharray', '7.4 3.2');
+    .append("line")
+    .attr("x1", scales.x(threshold))
+    .attr("x2", scales.x(threshold))
+    .attr("y1", 0)
+    .attr("y2", options.height)
+    .style("stroke", "#F05670")
+    .style("stroke-width", "1")
+    .style("stroke-dasharray", "7.4 3.2");
 }

package/src/components/PlChartHistogram/histogram.ts

@@ -1,27 +1,26 @@
-import { createSvgContainer } from './createSvgContainer';
-import { drawBins } from './drawBins';
-import { createGridlines } from './createGridlines';
-import { logspace } from './logspace';
-import { createLabels } from './createLabels';
-import type { AnyBin, BinLike, ChartOptions } from './types';
-import { drawThreshold } from './drawThreshold';
-import { normalizeBins } from './normalizeBins';
-import type { Selection } from 'd3-selection';
-import { bin, max as d3max, min as d3min } from 'd3-array';
-import { scaleLinear, scaleSymlog } from 'd3-scale';
-import { axisBottom, axisLeft } from 'd3-axis';
+import { createSvgContainer } from "./createSvgContainer";
+import { drawBins } from "./drawBins";
+import { createGridlines } from "./createGridlines";
+import { logspace } from "./logspace";
+import { createLabels } from "./createLabels";
+import type { AnyBin, BinLike, ChartOptions } from "./types";
+import { drawThreshold } from "./drawThreshold";
+import { normalizeBins } from "./normalizeBins";
+import type { Selection } from "d3-selection";
+import { bin, max as d3max, min as d3min } from "d3-array";
+import { scaleLinear, scaleSymlog } from "d3-scale";
+import { axisBottom, axisLeft } from "d3-axis";
 
 const gx = (svg: Selection<SVGGElement, unknown, null, undefined>, height: number) => {
-  return svg.append('g')
-    .style('font-size', '14px')
-    .style('font-weight', '500')
-    .attr('transform', `translate(0,${height})`);
+  return svg
+    .append("g")
+    .style("font-size", "14px")
+    .style("font-weight", "500")
+    .attr("transform", `translate(0,${height})`);
 };
 
 const gy = (svg: Selection<SVGGElement, unknown, null, undefined>) => {
-  return svg.append('g')
-    .style('font-size', '14px')
-    .style('font-weight', '500');
+  return svg.append("g").style("font-size", "14px").style("font-weight", "500");
 };
 
 const createYScale = (bins: BinLike[], height: number) => {
@@ -38,13 +37,13 @@ export function createHistogramLinear(el: HTMLElement, options: ChartOptions, da
   const min = d3min(data) as number;
   const max = d3max(data) as number;
 
-  const x = scaleLinear()
-    .domain([min, max])
-    .range([0, width]);
+  const x = scaleLinear().domain([min, max]).range([0, width]);
 
-  const bins: BinLike[] = normalizeBins(bin()
-    .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale
-    .thresholds(x.ticks(nBins))(data)); // Apply the data to create bins
+  const bins: BinLike[] = normalizeBins(
+    bin()
+      .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale
+      .thresholds(x.ticks(nBins))(data),
+  ); // Apply the data to create bins
 
   const y = createYScale(bins, height);
 
@@ -72,8 +71,7 @@ export function createHistogramLog(el: HTMLElement, options: ChartOptions, data:
   const x = scaleSymlog()
     .domain([min, max]) // Input range (min and max values of the data)
     .range([0, width])
-    .nice() // Output range (width of the chart)
-    ;
+    .nice(); // Output range (width of the chart)
 
   const createThresholds = (n: number) => {
     const res = [];
@@ -85,9 +83,11 @@ export function createHistogramLog(el: HTMLElement, options: ChartOptions, data:
     return res;
   };
 
-  const bins = normalizeBins(bin()
-    .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale
-    .thresholds(createThresholds(nBins))(data)); // Apply the data to create bins
+  const bins = normalizeBins(
+    bin()
+      .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale
+      .thresholds(createThresholds(nBins))(data),
+  ); // Apply the data to create bins
 
   const y = createYScale(bins, height);
 
@@ -116,10 +116,7 @@ export function createHistogramFromBins(el: HTMLElement, options: ChartOptions,
   const min = d3min(bins, (b) => b.x0) as number;
   const max = d3max(bins, (b) => b.x1) as number;
 
-  const x = scaleSymlog()
-    .domain([min, max])
-    .range([0, width])
-    .nice();
+  const x = scaleSymlog().domain([min, max]).range([0, width]).nice();
 
   const y = createYScale(bins, height);
 

package/src/components/PlChartHistogram/index.ts

@@ -1 +1 @@
-export { default as PlChartHistogram } from './PlChartHistogram.vue';
+export { default as PlChartHistogram } from "./PlChartHistogram.vue";

package/src/components/PlChartHistogram/normalizeBins.ts

@@ -1,9 +1,9 @@
-import type { AnyBin, BinLike } from './types';
-import type { Bin } from 'd3-array';
+import type { AnyBin, BinLike } from "./types";
+import type { Bin } from "d3-array";
 
 export function normalizeBins(bins: (Bin<number, number> | AnyBin)[]): BinLike[] {
   return bins.map((it) => {
-    if ('from' in it) {
+    if ("from" in it) {
       return {
         x0: it.from,
         x1: it.to,

package/src/components/PlChartHistogram/scales.spec.ts

@@ -1,10 +1,10 @@
-import { describe, it } from 'vitest';
-import { logspace } from './logspace';
+import { describe, it } from "vitest";
+import { logspace } from "./logspace";
 
-describe('Scales', () => {
-  it('logspace', async () => {
+describe("Scales", () => {
+  it("logspace", async () => {
     const res = logspace(0, 4, 10);
 
-    console.log('res', res);
+    console.log("res", res);
   });
 });

package/src/components/PlChartHistogram/types.ts

@@ -1,5 +1,5 @@
-import type { ScaleLinear, ScaleSymLog } from 'd3-scale';
-import type { Selection } from 'd3-selection';
+import type { ScaleLinear, ScaleSymLog } from "d3-scale";
+import type { Selection } from "d3-selection";
 
 export type Margin = { top: number; right: number; bottom: number; left: number };
 
@@ -39,7 +39,7 @@ export type AnyBin = CustomBin | BinLike;
  * Common case: array of numbers
  */
 export type PlChartHistogramBasicSettings = {
-  type: 'basic';
+  type: "basic";
   threshold?: number;
   numbers: number[];
   log?: boolean;
@@ -50,14 +50,14 @@ export type PlChartHistogramBasicSettings = {
  * For precalculated bins on log x scale
  */
 export type PlChartHistogramLogBinsSettings = {
-  type: 'log-bins';
+  type: "log-bins";
   threshold?: number;
   bins: AnyBin[];
 };
 
 export type PlChartHistogramSettings = (
-  PlChartHistogramBasicSettings |
-  PlChartHistogramLogBinsSettings
+  | PlChartHistogramBasicSettings
+  | PlChartHistogramLogBinsSettings
 ) & {
   title?: string;
   yAxisLabel?: string;

package/src/components/PlChartStackedBar/Legends.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { Color } from '../../colors';
+import { computed } from "vue";
+import type { Color } from "../../colors";
 
 function splitBy<T>(arr: T[], n: number): T[][] {
   const res = [];

package/src/components/PlChartStackedBar/PlChartStackedBar.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import StackedRow from './StackedRow.vue';
-import Legends from './Legends.vue';
-import type { PlChartStackedBarSettings } from './types';
+import { computed } from "vue";
+import StackedRow from "./StackedRow.vue";
+import Legends from "./Legends.vue";
+import type { PlChartStackedBarSettings } from "./types";
 
 const props = defineProps<{
   settings: PlChartStackedBarSettings;
@@ -14,17 +14,23 @@ const data = computed(() => {
   return props.settings.data ?? [];
 });
 
-const legends = computed(() => data.value.map((p) => ({
-  color: p.color,
-  text: p.label,
-})));
+const legends = computed(() =>
+  data.value.map((p) => ({
+    color: p.color,
+    text: p.label,
+  })),
+);
 </script>
 
 <template>
   <div :class="$style.component">
     <div v-if="settings.title" :class="$style.title">{{ settings.title }}</div>
-    <StackedRow :value="data"/>
-    <Legends v-if="showLegends && legends.length" :legends="legends" :max-in-column="settings.maxLegendsInColumn" />
+    <StackedRow :value="data" />
+    <Legends
+      v-if="showLegends && legends.length"
+      :legends="legends"
+      :max-in-column="settings.maxLegendsInColumn"
+    />
   </div>
 </template>
 

package/src/components/PlChartStackedBar/PlChartStackedBarCompact.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { PlChartStackedBarSettingsCompact } from './types';
-import StackedRowCompact from './StackedRowCompact.vue';
+import { computed } from "vue";
+import type { PlChartStackedBarSettingsCompact } from "./types";
+import StackedRowCompact from "./StackedRowCompact.vue";
 
 const props = defineProps<{
   settings: PlChartStackedBarSettingsCompact;
@@ -14,7 +14,7 @@ const data = computed(() => {
 
 <template>
   <div :class="$style.component">
-    <StackedRowCompact :value="data"/>
+    <StackedRowCompact :value="data" />
   </div>
 </template>
 

package/src/components/PlChartStackedBar/StackedRow.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { PlChartStackedBarSegment } from './types';
+import { computed } from "vue";
+import type { PlChartStackedBarSegment } from "./types";
 
 const props = defineProps<{
   value: PlChartStackedBarSegment[];
@@ -8,8 +8,8 @@ const props = defineProps<{
 }>();
 
 const style = computed(() => ({
-  height: props.height ?? '100%',
-  minHeight: '82px',
+  height: props.height ?? "100%",
+  minHeight: "82px",
 }));
 
 const parts = computed(() => {
@@ -31,16 +31,14 @@ const trackTransforms = [-40, -50, -50, -50, -80];
 </script>
 
 <template>
-  <div
-    :class="[$style.component]" :style="style"
-  >
+  <div :class="[$style.component]" :style="style">
     <div :class="$style.track">
       <div
         v-for="(v, i) in [0, 25, 50, 75, 100]"
         :key="i"
         :style="{
           left: `${v}%`,
-          '--transform': `translateX(${trackTransforms[i]}%)`
+          '--transform': `translateX(${trackTransforms[i]}%)`,
         }"
         :data-content="`${v}%`"
       />
@@ -53,7 +51,7 @@ const trackTransforms = [-40, -50, -50, -50, -80];
         :title.prop="p.description ?? p.label"
         :style="{
           width: `${p.fraction}%`,
-          backgroundColor: p.color
+          backgroundColor: p.color,
         }"
       />
     </div>