@milaboratories/uikit 2.2.45 → 2.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.45",
+  "version": "2.2.47",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -18,7 +18,8 @@
     "./*": "./*"
   },
   "dependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "d3": "^7.9.0"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
@@ -32,6 +33,7 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
+    "@types/d3": "^7.4.3",
     "@milaboratories/helpers": "^1.6.11",
     "@milaboratories/eslint-config": "^1.0.1",
     "@platforma-sdk/model": "^1.21.20"

package/src/colors/__tests__/colors.spec.ts

@@ -14,8 +14,6 @@ describe('Colors', () => {
 
     const viridis15 = Gradient(viridis).split(15);
 
-    console.log('viridis15', JSON.stringify(viridis15));
-
     expect(viridis.map((it) => it + 'FF').join(',')).toEqual(viridis15.map((it) => it.hex.toUpperCase()).join(','));
   });
 

package/src/components/PlChartHistogram/PlChartHistogram.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { createHistogramFromBins, createHistogramLinear, createHistogramLog } from './histogram';
+import type { ChartOptions, PlChartHistogramSettings } from './types';
+
+const props = defineProps<{
+  settings: PlChartHistogramSettings;
+}>();
+
+const chart = ref<HTMLElement>();
+
+const options = computed<ChartOptions>(() => {
+  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 width = totalWidth - margin.left - margin.right;
+  const height = totalHeight - margin.top - margin.bottom;
+
+  return {
+    width,
+    height,
+    margin,
+    compact,
+    nBins: 'nBins' in props.settings ? props.settings.nBins : 10,
+    xAxisLabel: xAxisLabel,
+    yAxisLabel: yAxisLabel,
+    threshold: threshold,
+  };
+});
+
+const createHistogram = () => {
+  const settings = props.settings;
+
+  if (settings.type === 'log-bins') {
+    createHistogramFromBins(chart.value!, options.value, settings.bins);
+    return;
+  }
+
+  if (settings.log) {
+    createHistogramLog(chart.value!, options.value, settings.numbers);
+  } else {
+    createHistogramLinear(chart.value!, options.value, settings.numbers);
+  }
+};
+
+watch(props, createHistogram);
+
+onMounted(createHistogram);
+</script>
+
+<template>
+  <div :class="$style.component">
+    <div v-if="settings.title && !settings.compact" :class="$style.title">{{ settings.title }}</div>
+    <div ref="chart" />
+  </div>
+</template>
+
+<style module>
+.component {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  svg {
+    font-family: var(--font-family-base);
+  }
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px; /* 120% */
+  letter-spacing: -0.2px;
+}
+
+: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;
+}
+</style>

package/src/components/PlChartHistogram/createGridlines.ts

@@ -0,0 +1,42 @@
+import * as d3 from 'd3';
+import type { ChartOptions, Scales } from './types';
+
+export function createGridlines(
+  svg: d3.Selection<SVGGElement, unknown, null, undefined>,
+  options: ChartOptions,
+  scales: Scales,
+  xTicks: (d: d3.Axis<d3.NumberValue>) => d3.Axis<d3.NumberValue>,
+) {
+  const { width, height } = options;
+
+  function makeYGridlines() {
+    return d3.axisLeft(scales.y) // Use the y-scale for horizontal gridlines
+      .ticks(6); // Adjust the number of gridlines
+  }
+
+  function makeXGridlines() {
+    return xTicks(d3.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
+
+  // 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
+
+  // Style the gridlines using CSS (or inline styles)
+  d3.selectAll('.grid line')
+    .style('stroke', '#E1E3EB') // Light gray gridlines
+    // .style('stroke-dasharray', '2,2') // Dashed gridlines
+    .style('opacity', 0.7); // Slightly transparent
+}

package/src/components/PlChartHistogram/createLabels.ts

@@ -0,0 +1,32 @@
+import type * as d3 from 'd3';
+import type { ChartOptions } from './types';
+
+export function createLabels(
+  svg: d3.Selection<SVGGElement, unknown, null, undefined>,
+  options: ChartOptions,
+) {
+  const { height, width, margin, xAxisLabel, yAxisLabel, compact } = options;
+
+  if (compact) {
+    return;
+  }
+
+  // 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
+
+  // 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
+}

package/src/components/PlChartHistogram/createSvgContainer.ts

@@ -0,0 +1,23 @@
+import * as d3 from 'd3';
+import type { ChartOptions } from './types';
+
+export function createSvgContainer(el: HTMLElement, options: ChartOptions) {
+  const { width, height, margin, compact } = options;
+
+  el.replaceChildren();
+
+  if (compact) {
+    el.style.height = height + 'px';
+    el.style.lineHeight = height + 'px';
+  }
+
+  const svg = d3
+    .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})`);
+
+  return svg;
+}

package/src/components/PlChartHistogram/drawBins.ts

@@ -0,0 +1,55 @@
+import type { BinLike, ChartOptions, Scales, SVG } from './types';
+import * as d3 from 'd3';
+
+export function drawBins(
+  svg: SVG,
+  bins: BinLike[],
+  dimension: ChartOptions,
+  scales: Scales,
+) {
+  const { height } = dimension;
+
+  const { x, y } = scales;
+
+  const tooltip = d3
+    .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}`);
+  };
+
+  const mousemove = function (event: MouseEvent) {
+    tooltip
+      .style('top', event.pageY - 10 + 'px')
+      .style('left', event.pageX + 10 + 'px');
+  };
+
+  const mouseout = function () {
+    tooltip.style('visibility', 'hidden');
+  };
+
+  // Add rectangles for the histogram bars
+  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
+}

package/src/components/PlChartHistogram/drawThreshold.ts

@@ -0,0 +1,19 @@
+import type { ChartOptions, Scales, SVG } from './types';
+
+export function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {
+  const { threshold } = options;
+
+  if (!threshold) {
+    return;
+  }
+
+  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');
+}

package/src/components/PlChartHistogram/histogram.ts

@@ -0,0 +1,136 @@
+import * as d3 from 'd3';
+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';
+
+const gx = (svg: d3.Selection<SVGGElement, unknown, null, undefined>, height: number) => {
+  return svg.append('g')
+    .style('font-size', '14px')
+    .style('font-weight', '500')
+    .attr('transform', `translate(0,${height})`);
+};
+
+const gy = (svg: d3.Selection<SVGGElement, unknown, null, undefined>) => {
+  return svg.append('g')
+    .style('font-size', '14px')
+    .style('font-weight', '500');
+};
+
+const createYScale = (bins: BinLike[], height: number) => {
+  return d3.scaleLinear()
+    .domain([0, d3.max(bins, (d) => d.length)!]) // Max bin count for the domain
+    .range([height, 0]); // Map to chart height (invert to match SVG coordinates)
+};
+
+export function createHistogramLinear(el: HTMLElement, options: ChartOptions, data: number[]) {
+  const { width, height, nBins = 10 } = options;
+
+  const svg = createSvgContainer(el, options);
+
+  const min = d3.min(data) as number;
+  const max = d3.max(data) as number;
+
+  const x = d3.scaleLinear()
+    .domain([min, max])
+    .range([0, width]);
+
+  const bins: BinLike[] = normalizeBins(d3.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);
+
+  createGridlines(svg, options, { x, y }, (x) => x.ticks(6));
+
+  drawBins(svg, bins, options, { x, y });
+
+  drawThreshold(svg, { x, y }, options);
+
+  gx(svg, height).call(d3.axisBottom(x).tickSize(0));
+
+  gy(svg).call(d3.axisLeft(y).tickSize(0));
+
+  createLabels(svg, options);
+}
+
+export function createHistogramLog(el: HTMLElement, options: ChartOptions, data: number[]) {
+  const { width, height, nBins = 10 } = options;
+
+  const svg = createSvgContainer(el, options);
+
+  const min = d3.min(data) as number;
+  const max = d3.max(data) as number;
+
+  const x = d3.scaleSymlog()
+    .domain([min, max]) // Input range (min and max values of the data)
+    .range([0, width])
+    .nice() // Output range (width of the chart)
+    ;
+
+  const createThresholds = (n: number) => {
+    const res = [];
+
+    for (let i = 0; i <= n; i++) {
+      res.push(Number(x.invert(width * (i / n)).toFixed(2)));
+    }
+
+    return res;
+  };
+
+  const bins = normalizeBins(d3.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);
+
+  const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);
+
+  createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));
+
+  drawBins(svg, bins, options, { x, y });
+
+  drawThreshold(svg, { x, y }, options);
+
+  gx(svg, height).call(d3.axisBottom(x).tickValues(tickValues).tickSize(0));
+
+  gy(svg).call(d3.axisLeft(y).tickSize(0));
+
+  createLabels(svg, options);
+}
+
+export function createHistogramFromBins(el: HTMLElement, options: ChartOptions, _bins: AnyBin[]) {
+  const { width, height } = options;
+
+  const svg = createSvgContainer(el, options);
+
+  const bins = normalizeBins(_bins);
+
+  const min = d3.min(bins, (b) => b.x0) as number;
+  const max = d3.max(bins, (b) => b.x1) as number;
+
+  const x = d3.scaleSymlog()
+    .domain([min, max])
+    .range([0, width])
+    .nice();
+
+  const y = createYScale(bins, height);
+
+  const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);
+
+  createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));
+
+  drawBins(svg, bins, options, { x, y });
+
+  drawThreshold(svg, { x, y }, options);
+
+  gx(svg, height).call(d3.axisBottom(x).tickValues(tickValues).tickSize(0));
+
+  gy(svg).call(d3.axisLeft(y).tickSize(0));
+
+  createLabels(svg, options);
+}

package/src/components/PlChartHistogram/index.ts

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

package/src/components/PlChartHistogram/logspace.ts

@@ -0,0 +1,13 @@
+export function logspace(startExp: number, stopExp: number, num = 50, base = 10) {
+  if (num <= 0) return [];
+
+  const step = (stopExp - startExp) / (num - 1);
+  const result = [];
+
+  for (let i = 0; i < num; i++) {
+    const exponent = startExp + i * step;
+    result.push(Math.pow(base, exponent));
+  }
+
+  return result;
+}

package/src/components/PlChartHistogram/normalizeBins.ts

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

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

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

package/src/components/PlChartHistogram/types.ts

@@ -0,0 +1,66 @@
+export type Margin = { top: number; right: number; bottom: number; left: number };
+
+export type ChartOptions = {
+  width: number;
+  height: number;
+  margin: Margin;
+  nBins?: number;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  threshold?: number;
+  compact?: boolean;
+};
+
+export type Scales = {
+  x: d3.ScaleSymLog<number, number, never> | d3.ScaleLinear<number, number>;
+  y: d3.ScaleLinear<number, number, never>;
+};
+
+export type SVG = d3.Selection<SVGGElement, unknown, null, undefined>;
+
+export type CustomBin = {
+  from: number;
+  to: number;
+  weight: number;
+};
+
+export type BinLike = {
+  x0: number;
+  x1: number;
+  length: number;
+};
+
+export type AnyBin = CustomBin | BinLike;
+
+/**
+ * Common case: array of numbers
+ */
+export type PlChartHistogramBasicSettings = {
+  type: 'basic';
+  threshold?: number;
+  numbers: number[];
+  log?: boolean;
+  nBins?: number;
+};
+
+/**
+ * For precalculated bins on log x scale
+ */
+export type PlChartHistogramLogBinsSettings = {
+  type: 'log-bins';
+  threshold?: number;
+  bins: AnyBin[];
+};
+
+export type PlChartHistogramSettings = (
+  PlChartHistogramBasicSettings |
+  PlChartHistogramLogBinsSettings
+) & {
+  title?: string;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  // with margins
+  totalWidth?: number;
+  totalHeight?: number;
+  compact?: boolean;
+};

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -7,8 +7,9 @@ export default {
 <script lang="ts" setup>
 import { useEventListener } from '@/composition/useEventListener';
 import './pl-dialog-modal.scss';
-import { ref, useAttrs, useSlots } from 'vue';
+import { computed, ref, useAttrs, useSlots } from 'vue';
 import PlCloseModalBtn from '@/utils/PlCloseModalBtn.vue';
+import type { Size } from '@/types';
 
 const slots = useSlots();
 
@@ -56,6 +57,10 @@ const props = withDefaults(
      * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
      */
     closeOnOutsideClick?: boolean;
+    /**
+     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.
+     */
+    size?: Size | undefined;
   }>(),
   {
     width: '448px',
@@ -65,11 +70,45 @@ const props = withDefaults(
     closable: true,
     noContentGutters: false,
     actionsHasTopBorder: true,
+    size: undefined,
   },
 );
 
 const modal = ref<HTMLElement>();
 
+const style = computed(() => {
+  const { width, height, minHeight, maxHeight, size } = props;
+
+  if (size === 'small') {
+    return {
+      width: '448px',
+      height: '440px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  if (size === 'medium') {
+    return {
+      width: '720px',
+      height: '720px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  if (size === 'large') {
+    return {
+      width: '1080px',
+      height: '880px',
+      minHeight: 'auto',
+      maxHeight: 'auto',
+    };
+  }
+
+  return { width, height, minHeight, maxHeight };
+});
+
 const $attrs = useAttrs();
 
 function onClickShadow(ev: Event) {
@@ -94,7 +133,7 @@ useEventListener(document.body, 'keyup', (ev) => {
           ref="modal"
           class="pl-dialog-modal"
           :class="{ 'has-title': slots.title, 'has-content': slots.default }"
-          :style="{ width, height, minHeight, maxHeight }"
+          :style="style"
         >
           <PlCloseModalBtn v-if="closable" class="close-modal-btn" @click.stop="emit('update:modelValue', false)" />
           <div v-if="slots.title" class="pl-dialog-modal__title">

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -73,6 +73,7 @@ const props = withDefaults(
     placeholder: '...',
     required: false,
     disabled: false,
+    options: undefined,
   },
 );
 
@@ -166,8 +167,6 @@ const toggleModel = () => (data.open = !data.open);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  console.log('>>>> overlay.value?.$el', overlay.value?.$el);
-
   if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -53,6 +53,7 @@ const props = withDefaults(
     placeholder: '...',
     required: false,
     disabled: false,
+    options: undefined,
   },
 );
 

package/src/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.ts

@@ -43,11 +43,9 @@ describe('PlDropdownMultiRef', () => {
 
     const options = getOptions();
 
-    console.log('options', options);
-
     expect(options.length).toBe(2);
 
-    console.log(wrapper.props('modelValue'), 'mv');
+    // console.log(wrapper.props('modelValue'), 'mv');
     options[0].click();
 
     await delay(20);

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -17,8 +17,6 @@ const canShowWhiteBg = computed(() => props.stage !== 'not_started');
 const currentProgress = computed(() => props.stage === 'done' ? 100 : Math.min(100, props.progress || 0));
 
 const canShowInfinityLoader = computed(() => props.progress === undefined && props.stage !== 'done' && props.stage !== 'not_started' && !props.error);
-
-console.log(props);
 </script>
 
 <template>