@milaboratories/uikit 2.2.37 → 2.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.37",
+  "version": "2.2.39",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,9 +32,9 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
+    "@milaboratories/eslint-config": "^1.0.1",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.20.11",
-    "@milaboratories/eslint-config": "^1.0.0"
+    "@platforma-sdk/model": "^1.20.27"
   },
   "scripts": {
     "dev": "vite",

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

@@ -0,0 +1,27 @@
+import { describe } from 'node:test';
+import { expect, test } from 'vitest';
+import { Gradient } from '../gradient';
+import { viridis } from '../palette';
+import { Color } from '../color';
+
+describe('Colors', () => {
+  test('gradients', () => {
+    const viridis5colors = Gradient(viridis).split(5);
+
+    viridis5colors.forEach((color, i) => {
+      expect(color.hex).toEqual(Gradient(viridis).getNthOf(i + 1, 5).hex);
+    });
+
+    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(','));
+  });
+
+  test('categorical colors', () => {
+    const color = Color.categorical('lime_light');
+
+    expect(color.hex.toUpperCase()).toEqual('#CBEB67FF');
+  });
+});

package/src/colors/color.ts

@@ -0,0 +1,80 @@
+import { categoricalColors, type CategoricalColor } from './palette';
+
+/**
+ * Represents a color with red, green, blue, and alpha channels.
+ * Provides methods to convert to HEX and RGBA formats.
+ *
+ * @param {number} r - Red channel (0-255).
+ * @param {number} g - Green channel (0-255).
+ * @param {number} b - Blue channel (0-255).
+ * @param {number} [a=1] - Alpha channel (0-1).
+ */
+export function Color(r: number, g: number, b: number, a: number = 1) {
+  return new class {
+    constructor(
+      public readonly r: number,
+      public readonly g: number,
+      public readonly b: number,
+      public readonly a: number = 1,
+    ) {}
+
+    get hex() {
+      const hexR = r.toString(16).padStart(2, '0');
+      const hexG = g.toString(16).padStart(2, '0');
+      const hexB = b.toString(16).padStart(2, '0');
+      const hexA = Math.round(a * 255).toString(16).padStart(2, '0'); // Alpha in 2-digit hex
+
+      return `#${hexR}${hexG}${hexB}${hexA}`;
+    }
+
+    get rgba() {
+      return `rgb(${r}, ${g}, ${b}, ${a})`;
+    }
+
+    toString() {
+      return this.hex;
+    }
+
+    toJSON() {
+      return this.hex;
+    }
+  }(r, g, b, a);
+}
+
+export type Color = ReturnType<typeof Color>;
+
+Color.fromHex = (hex: string): Color => {
+  hex = hex.replace('#', '');
+
+  let r: number, g: number, b: number, a: number = 1;
+
+  if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else if (hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16) / 255;
+  } else {
+    throw new Error('Invalid HEX color format.');
+  }
+
+  return Color(r, g, b, a);
+};
+
+/**
+ * Parses a color string (attention: currently supports only HEX, @todo)
+ */
+Color.fromString = (str: string) => {
+  if (str.startsWith('#')) {
+    return Color.fromHex(str);
+  }
+
+  throw Error('TODO: implement rgb(a), hsl');
+};
+
+Color.categorical = (name: CategoricalColor) => {
+  return Color.fromHex(categoricalColors[name]);
+};

package/src/colors/gradient.ts

@@ -0,0 +1,136 @@
+import type { Palette } from './palette';
+import { palettes } from './palette';
+import { Color } from './color';
+
+export type GradientSource = (string | Color)[] | Palette;
+
+Color.fromHex = (hex: string): Color => {
+  hex = hex.replace('#', '');
+
+  let r: number, g: number, b: number, a: number = 1;
+
+  if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  } else if (hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16) / 255;
+  } else {
+    throw new Error('Invalid HEX color format.');
+  }
+
+  return Color(r, g, b, a);
+};
+
+/**
+ * Parses a color string (attention: currently supports only HEX, @todo)
+ */
+Color.fromString = (str: string) => {
+  if (str.startsWith('#')) {
+    return Color.fromHex(str);
+  }
+
+  throw Error('TODO: implement rgb(a), hsl');
+};
+
+function lerp(a: number, b: number, t: number): number {
+  return a + t * (b - a);
+}
+
+/**
+ * Interpolates between two colors.
+ *
+ * @param {Color} color1 - Start color.
+ * @param {Color} color2 - End color.
+ * @param {number} t - Interpolation factor [0, 1].
+ * @returns {Color} Interpolated color.
+ */
+export function interpolateColor(color1: Color, color2: Color, t: number): Color {
+  const r = Math.round(lerp(color1.r, color2.r, t));
+  const g = Math.round(lerp(color1.g, color2.g, t));
+  const b = Math.round(lerp(color1.b, color2.b, t));
+  return Color(r, g, b);
+}
+
+/**
+ * Normalizes a gradient definition into an array of Color objects.
+ *
+ * @param {GradientSource} raw - A gradient defined as an array of strings, Colors, or a Palette.
+ * @returns {Color[]} Array of normalized Color objects.
+ */
+export function normalizeGradient(raw: GradientSource): Color[] {
+  if (typeof raw === 'string') {
+    return palettes[raw].map((it) => Color.fromString(it));
+  }
+
+  return raw.map((it) => {
+    if (typeof it === 'string') {
+      return Color.fromString(it);
+    }
+
+    return it;
+  });
+}
+
+/**
+ * Creates a gradient with utilities to sample or split colors.
+ */
+export function Gradient(gradient: GradientSource) {
+  return new class {
+    constructor(public readonly colors: Color[]) {}
+
+    /**
+     * Samples a color at a specific point in the gradient.
+     *
+     * @param {number} t - A value in [0, 1] representing the position in the gradient.
+     */
+    fromInterval(t: number) {
+      if (t < 0) throw new Error('t must be greater than or equal to 0');
+      if (t > 1) throw new Error('t must be less than or equal to 1');
+
+      const colors = this.colors;
+
+      const segments = colors.length - 1;
+
+      const segment = Math.floor(t * segments);
+
+      const localT = (t * segments) % 1; // Local t within the current segment
+
+      const color1 = colors[segment];
+      const color2 = colors[Math.min(segment + 1, segments)];
+
+      return interpolateColor(color1, color2, localT);
+    }
+
+    /**
+     * Gets the nth color in a gradient divided into segments.
+     *
+     * @param {number} n - Index of the color (1-based).
+     * @param {number} segments - Total number of segments.
+     */
+    getNthOf(n: number, segments: number) {
+      if (n <= 0) throw new Error('n must be greater than 0');
+      if (n > segments) throw Error('n must be lower or equal than count of segments');
+      return this.fromInterval((n - 1) / (segments - 1));
+    }
+
+    /**
+     * Splits the gradient into n evenly spaced colors.
+     */
+    split(n: number) {
+      if (n <= 0) throw new Error('n must be greater than 0');
+
+      const colors: Color[] = [];
+
+      for (let i = 0; i < n; i++) {
+        const t = i / (n - 1); // Normalize t to [0, 1]
+        colors.push(this.fromInterval(t));
+      }
+
+      return colors;
+    }
+  }(normalizeGradient(gradient));
+}

package/src/colors/index.ts

@@ -0,0 +1,3 @@
+export * from './palette';
+export * from './color';
+export * from './gradient';

package/src/colors/palette.ts

@@ -0,0 +1,283 @@
+/**
+ * good for age range // from newborn → to old
+ */
+export const viridis = [
+  '#FFF680',
+  '#E8F66C',
+  '#C4F16B',
+  '#9AEB71',
+  '#70E084',
+  '#43D18A',
+  '#2DBD96',
+  '#28A8A0',
+  '#2793A3',
+  '#337B9E',
+  '#3B6399',
+  '#424C8F',
+  '#4A3584',
+  '#481B70',
+  '#4A005C',
+];
+
+/**
+ * from light → to hard (errors)
+ */
+export const magma = [
+  '#FFF680',
+  '#FFE871',
+  '#FDCD6F',
+  '#FEAD66',
+  '#FA935F',
+  '#F57258',
+  '#EB555E',
+  '#D64470',
+  '#B83778',
+  '#982D82',
+  '#7E2584',
+  '#611B84',
+  '#49187A',
+  '#38116B',
+  '#2B125C',
+];
+
+/**
+ * From light to hard
+ */
+const density = [
+  '#DFFADC',
+  '#C9F5D3',
+  '#B3F2CF',
+  '#9AEBCD',
+  '#80DCCC',
+  '#6DC8D2',
+  '#61B7DB',
+  '#5C97DB',
+  '#5A7CD6',
+  '#6060C7',
+  '#674BB3',
+  '#693799',
+  '#6A277B',
+  '#671D60',
+  '#611347',
+];
+
+/**
+ * From light to hard
+ */
+const salinity = [
+  '#FAFAB4',
+  '#ECFBA1',
+  '#D6F598',
+  '#BEEB91',
+  '#A2E082',
+  '#82D67C',
+  '#67C77E',
+  '#4FB281',
+  '#429E8C',
+  '#36898F',
+  '#2B668F',
+  '#254B85',
+  '#213475',
+  '#1E1E6B',
+  '#1C0F5C',
+];
+
+/**
+ * temperature // recommended for 5+ points
+ */
+const sunset = [
+  '#FFEA80',
+  '#FFD971',
+  '#FFC171',
+  '#FFA76C',
+  '#FB8B6F',
+  '#EB7179',
+  '#D75F7F',
+  '#C2518D',
+  '#A64392',
+  '#8038A4',
+  '#6135A4',
+  '#4735A3',
+  '#283A8F',
+  '#013C70',
+  '#003752',
+];
+
+/**
+ * hight contrast range // recommended for 5+ points
+ */
+const rainbow = [
+  '#FFF780',
+  '#E7FA6F',
+  '#C1FA6A',
+  '#9BF56C',
+  '#79F080',
+  '#66E698',
+  '#56D7AC',
+  '#50C7C7',
+  '#56B4D7',
+  '#6898EB',
+  '#7481FA',
+  '#8769FA',
+  '#9450EB',
+  '#9634D6',
+  '#942AAE',
+];
+
+/**
+ * from good to bad
+ */
+const spectrum = [
+  '#43317B',
+  '#3B57A3',
+  '#3390B3',
+  '#5DC2B1',
+  '#95DBA5',
+  '#B9EBA0',
+  '#DBF5A6',
+  '#F5F5B7',
+  '#FEEA9D',
+  '#FFD285',
+  '#FA9B78',
+  '#E55C72',
+  '#C23665',
+  '#8F1150',
+  '#5C1243',
+];
+
+/**
+ * from good to bad
+ */
+const teal_red = [
+  '#122B5C',
+  '#1A496B',
+  '#1D7C8F',
+  '#21A3A3',
+  '#5FC7AB',
+  '#99E0B1',
+  '#CEF0CE',
+  '#F0F0F0',
+  '#FAE6D2',
+  '#FAC5AA',
+  '#FA9282',
+  '#E55C72',
+  '#C23665',
+  '#8F1150',
+  '#5C1243',
+];
+
+/**
+ * Temperature // From cold → to warm
+ */
+const blue_red = [
+  '#0E0E8F',
+  '#1D23B8',
+  '#3748E5',
+  '#647DFA',
+  '#96A7FA',
+  '#C3CCFA',
+  '#E1E5FA',
+  '#F0F0F0',
+  '#F9DBDB',
+  '#F9BDBD',
+  '#F59393',
+  '#E55C72',
+  '#C23665',
+  '#8F1150',
+  '#5C1243',
+];
+
+/**
+ * Neutral range // from A → to B
+ */
+const lime_rose = [
+  '#2E5C00',
+  '#49850D',
+  '#3748E5',
+  '#8FC758',
+  '#ABDB7B',
+  '#C5EBA0',
+  '#DCF5C4',
+  '#F0F0F0',
+  '#FADCF5',
+  '#F5C4ED',
+  '#F0A3E3',
+  '#E573D2',
+  '#CC49B6',
+  '#991884',
+  '#701260',
+];
+
+/**
+ * bars only big range 7+ points // cutting
+ */
+const viridis_magma = [
+  '#4A005C',
+  '#4A2F7F',
+  '#3F5895',
+  '#3181A0',
+  '#28A8A0',
+  '#3ECD8D',
+  '#86E67B',
+  '#CEF36C',
+  '#FFF680',
+  '#FED470',
+  '#FDA163',
+  '#F36C5A',
+  '#D64470',
+  '#A03080',
+  '#702084',
+  '#451777',
+  '#2B125C',
+];
+
+export const palettes = {
+  viridis,
+  magma,
+  density,
+  salinity,
+  sunset,
+  rainbow,
+  spectrum,
+  teal_red,
+  blue_red,
+  lime_rose,
+  viridis_magma,
+};
+
+export type Palette = keyof typeof palettes;
+
+/**
+ * Just named colors
+ */
+export const categoricalColors = {
+  green_light: '#99E099',
+  green_bright: '#198020',
+  green_dark: '#42B842',
+  violet_light: '#C1ADFF',
+  violet_bright: '#845CFF',
+  violet_dark: '#5F31CC',
+  orange_light: '#FFCB8F',
+  orange_bright: '#FF9429',
+  orange_dark: '#C26A27',
+  teal_light: '#90E0E0',
+  teal_bright: '#27C2C2',
+  teal_dark: '#068A94',
+  rose_light: '#FAAAFA',
+  rose_bright: '#E553E5',
+  rose_dark: '#A324B2',
+  lime_light: '#CBEB67',
+  lime_bright: '#95C700',
+  lime_dark: '#659406',
+  blue_light: '#99CCFF',
+  blue_bright: '#2D93FA',
+  blue_dark: '#105BCC',
+  red_light: '#FFADBA',
+  red_bright: '#F05670',
+  red_dark: '#AD3757',
+  grey_light: '#D3D7E0',
+  grey_bright: '#929BAD',
+  grey_dark: '#5E5E70',
+};
+
+export type CategoricalColor = keyof typeof categoricalColors;

package/src/components/PlChartStackedBar/Legends.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { Color } from '@/colors';
+
+function splitBy<T>(arr: T[], n: number): T[][] {
+  const res = [];
+  let chunk: T[] = [];
+
+  for (let i = 0; i < arr.length; i++) {
+    if (chunk.length < n) {
+      chunk.push(arr[i]);
+    } else {
+      res.push(chunk);
+      chunk = [arr[i]];
+    }
+  }
+
+  res.push(chunk);
+
+  return res;
+}
+
+const props = defineProps<{
+  maxInColumn?: number;
+  legends: {
+    color: string | Color;
+    text: string;
+  }[];
+}>();
+
+const groups = computed(() => {
+  return splitBy(props.legends, props.maxInColumn ?? 5);
+});
+</script>
+
+<template>
+  <div :class="$style.component">
+    <div v-for="(group, k) in groups" :key="k" :class="$style.legend">
+      <div v-for="(l, i) in group" :key="i" :class="$style.item">
+        <div :class="$style.chip" :style="{ backgroundColor: l.color.toString() }" />
+        {{ l.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css" module>
+.component {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  justify-content: space-between;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-wrap: nowrap;
+  margin-top: 24px;
+  max-height: 120px;
+  flex: 1;
+}
+
+.chip {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  flex-grow: 0;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--color-txt-01);
+}
+</style>

package/src/components/PlChartStackedBar/PlChartStackedBar.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import StackedRow from './StackedRow.vue';
+import Legends from './Legends.vue';
+import type { PlChartStackedBarSettings } from './types';
+
+const props = defineProps<{
+  settings: PlChartStackedBarSettings;
+}>();
+
+const showLegends = computed(() => props.settings.showLegends ?? true);
+
+const data = computed(() => {
+  return props.settings.data ?? [];
+});
+
+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" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px; /* 120% */
+  letter-spacing: -0.2px;
+  margin-bottom: 24px;
+}
+</style>