@milaboratories/uikit 2.2.40 → 2.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.40",
+  "version": "2.2.42",
   "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",
+    "@platforma-sdk/model": "^1.21.0",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.20.27"
+    "@milaboratories/eslint-config": "^1.0.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlChartStackedBar/PlChartStackedBarCompact.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { PlChartStackedBarSettingsCompact } from './types';
+import StackedRowCompact from './StackedRowCompact.vue';
+
+const props = defineProps<{
+  settings: PlChartStackedBarSettingsCompact;
+}>();
+
+const data = computed(() => {
+  return props.settings.data ?? [];
+});
+</script>
+
+<template>
+  <div :class="$style.component">
+    <StackedRowCompact :value="data"/>
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+</style>

package/src/components/PlChartStackedBar/StackedRow.vue

@@ -1,16 +1,14 @@
 <script lang="ts" setup>
-import { tapIf } from '@milaboratories/helpers';
 import { computed } from 'vue';
 import type { PlChartStackedBarSegment } from './types';
 
 const props = defineProps<{
   value: PlChartStackedBarSegment[];
   height?: number;
-  showFractionInLabel?: boolean;
 }>();
 
 const style = computed(() => ({
-  height: '100%',
+  height: props.height ?? '100%',
   minHeight: '82px',
 }));
 
@@ -19,14 +17,7 @@ const parts = computed(() => {
   const total = parts.reduce((res, it) => res + it.value, 0);
   return parts.map((p) => {
     const fraction = (p.value / total) * 100;
-    const fractionString = ((p.value / total) * 100).toFixed(1);
-    const label = tapIf(p.label, (label) => {
-      if (props.showFractionInLabel) {
-        return `${label} ${fractionString}%`;
-      }
-
-      return label;
-    });
+    const label = p.label;
     return {
       color: p.color.toString(),
       description: p.description,
@@ -35,6 +26,8 @@ const parts = computed(() => {
     };
   });
 });
+
+const trackTransforms = [-40, -50, -50, -50, -80];
 </script>
 
 <template>
@@ -45,7 +38,10 @@ const parts = computed(() => {
       <div
         v-for="(v, i) in [0, 25, 50, 75, 100]"
         :key="i"
-        :style="`left: ${v}%`"
+        :style="{
+          left: `${v}%`,
+          '--transform': `translateX(${trackTransforms[i]}%)`
+        }"
         :data-content="`${v}%`"
       />
     </div>
@@ -69,8 +65,6 @@ const parts = computed(() => {
   height: auto;
   position: relative;
   overflow: visible;
-  border: 1px solid green;
-
   border: 1px solid var(--txt-01);
   padding: 12px 6px;
   border-radius: 0;
@@ -80,7 +74,6 @@ const parts = computed(() => {
 .container {
   display: flex;
   flex-direction: row;
-  gap: 1px;
   width: 100%;
   height: 100%;
   align-items: center;
@@ -107,9 +100,9 @@ const parts = computed(() => {
     &::after {
       position: absolute;
       content: attr(data-content);
+      transform: var(--transform);
       left: 0;
       bottom: -24px;
-      transform: translateX(-50%);
     }
   }
 }

package/src/components/PlChartStackedBar/StackedRowCompact.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { PlChartStackedBarSegment } from './types';
+
+const props = defineProps<{
+  value: PlChartStackedBarSegment[];
+  height?: number;
+}>();
+
+const style = computed(() => ({
+  height: props.height ?? '100%',
+  minHeight: '24px',
+}));
+
+const parts = computed(() => {
+  const parts = props.value || [];
+  const total = parts.reduce((res, it) => res + it.value, 0);
+  return parts.map((p) => {
+    const fraction = (p.value / total) * 100;
+    const label = p.label;
+    return {
+      color: p.color.toString(),
+      description: p.description,
+      fraction,
+      label,
+    };
+  });
+});
+</script>
+
+<template>
+  <div
+    :class="[$style.component]" :style="style"
+  >
+    <div :class="$style.container">
+      <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
+      <div
+        v-for="(p, i) in parts"
+        :key="i"
+        :title.prop="p.description ?? p.label"
+        :style="{
+          width: `${p.fraction}%`,
+          backgroundColor: p.color
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  border-radius: 2px;
+
+  .notReady {
+    font-size: larger;
+    font-weight: bolder;
+    color: var(--txt-mask);
+    margin-left: 24px;
+  }
+
+  .container {
+    position: relative;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  overflow: hidden;
+  > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.notReady {
+  color: var(--txt-03) !important;
+}
+</style>

package/src/components/PlChartStackedBar/index.ts

@@ -1,3 +1,4 @@
 export { default as PlChartStackedBar } from './PlChartStackedBar.vue';
+export { default as PlChartStackedBarCompact } from './PlChartStackedBarCompact.vue';
 
 export * from './types';

package/src/components/PlChartStackedBar/types.ts

@@ -7,18 +7,20 @@ export type PlChartStackedBarSegment = {
   color: string | Color;
 };
 
-export type PlChartStackedBarSettings = {
-  /**
-   * The title of the chart.
-   * This will be displayed at the top of the chart, if provided.
-   */
-  title?: string;
-
+export type PlChartStackedBarSettingsCompact = {
   /**
    * The data to be displayed in the chart.
    * Each entry represents a segment of a stacked bar.
    */
   data: PlChartStackedBarSegment[];
+};
+
+export type PlChartStackedBarSettings = PlChartStackedBarSettingsCompact & {
+  /**
+   * The title of the chart.
+   * This will be displayed at the top of the chart, if provided.
+   */
+  title?: string;
 
   /**
    * The maximum number of legends displayed in a single column.

package/src/components/PlProgressCell/types.ts

@@ -1,7 +1,7 @@
 export type PlProgressCellProps = {
   stage: 'not_started' | 'running' | 'done';
-  step: string; // "Alignment" / "Queued"
-  progressString: string; // "20%" or "2 / 4"
+  step?: string; // "Alignment" / "Queued"
+  progressString?: string; // "20%" or "2 / 4"
   progress?: number; // i.e. 0.2 for 20%; 'undefined' for unknown progress = animated progressbar
   error?: string;
 };