@milaboratories/uikit 2.2.45 → 2.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.45",
+  "version": "2.2.46",
   "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,9 +33,10 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/helpers": "^1.6.11",
+    "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.1",
-    "@platforma-sdk/model": "^1.21.20"
+    "@platforma-sdk/model": "^1.21.20",
+    "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {
     "dev": "vite",

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/PlDropdownMulti/PlDropdownMulti.vue

@@ -166,8 +166,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/__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>

package/src/composition/useComponentProp.ts

@@ -0,0 +1,36 @@
+import type { InferComponentProps } from '@/types';
+import { computed, type Component, type ComputedRef } from 'vue';
+
+/**
+ * A utility function that creates a reactive computed property
+ * based on a specific prop of a Vue component.
+ *
+ *
+ * @template C - The Vue component type.
+ * @template P - The prop name.
+ *
+ * @param cb - A factory function that returns the value of the prop from the inferred component props.
+ *
+ * @returns A `ComputedRef` of the specified prop
+ *
+ * @example
+ * ```ts
+ * import { ref, defineComponent } from 'vue';
+ * import { useComponentProp } from '@platforma-sdk/ui-vue';
+ *
+ * const MyComponent = defineComponent({
+ *   props: {
+ *     myProp: {
+ *       type: String,
+ *       required: true
+ *     }
+ *   }
+ * });
+ *
+ * const propValue = useComponentProp<typeof MyComponent, 'myProp'>(() => 'example');
+ * console.log(propValue.value); // Outputs: 'example'
+ * ```
+ */
+export function useComponentProp<C extends Component, P extends keyof InferComponentProps<C>>(cb: () => InferComponentProps<C>[P]): ComputedRef<InferComponentProps<C>[P]> {
+  return computed(cb);
+}

package/src/helpers/index.ts

@@ -9,7 +9,7 @@ export function requestTick<P>(cb: (...args: P[]) => void) {
       });
       tick = true;
     } else {
-      console.log('handle pressure');
+      // console.log('handle pressure');
     }
   };
 }

package/src/index.ts

@@ -63,6 +63,7 @@ export * from './components/PlIcon16';
 export * from './components/PlIcon24';
 
 export * from './components/PlChartStackedBar';
+export * from './components/PlChartHistogram';
 
 export * from './colors';
 
@@ -93,6 +94,7 @@ export { useInterval } from './composition/useInterval';
 export { useFormState } from './composition/useFormState';
 export { useQuery } from './composition/useQuery.ts';
 export { useDraggable } from './composition/useDraggable';
+export { useComponentProp } from './composition/useComponentProp';
 
 /**
  * Utils/Partials

package/src/types.ts

@@ -1,5 +1,5 @@
 import type { ImportFileHandle, Platforma, StorageHandle, PlRef as ModelRef } from '@platforma-sdk/model';
-import type { Ref, ComputedRef } from 'vue';
+import type { Ref, ComputedRef, Component } from 'vue';
 import { maskIcons16 } from './generated/icons-16';
 import { maskIcons24 } from './generated/icons-24';
 
@@ -78,6 +78,8 @@ export type ImportedFiles = {
   files: ImportFileHandle[];
 };
 
+export type InferComponentProps<C extends Component> = C extends Component<infer P> ? P : never;
+
 declare global {
   const platforma: Platforma | undefined;
   interface Window {