@platforma-sdk/ui-vue 1.21.21 → 1.21.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.21.21",
+  "version": "1.21.24",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,7 +23,7 @@
     "canonicalize": "^2.0.0",
     "ag-grid-enterprise": "^33.0.3",
     "ag-grid-vue3": "^33.0.3",
-    "@milaboratories/uikit": "^2.2.45",
+    "@milaboratories/uikit": "^2.2.47",
     "@platforma-sdk/model": "^1.21.20"
   },
   "devDependencies": {

package/src/components/PlAgChartHistogramCell/PlAgChartHistogramCell.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { ICellRendererParams } from 'ag-grid-enterprise';
+import {
+  type InferComponentProps,
+  PlChartHistogram,
+} from '@milaboratories/uikit';
+import { computed, ref } from 'vue';
+import { useElementBounding } from '@vueuse/core';
+
+type PlChartHistogramSettings = InferComponentProps<typeof PlChartHistogram>['settings'];
+
+const props = defineProps<{
+  params: ICellRendererParams<unknown, PlChartHistogramSettings | undefined>;
+}>();
+
+const root = ref<HTMLElement>();
+
+const { width } = useElementBounding(root);
+
+const settings = computed<PlChartHistogramSettings | undefined>(() => {
+  if (!props.params.value) {
+    return undefined;
+  }
+
+  if (!width.value) {
+    return undefined;
+  }
+
+  return { ...props.params.value, compact: true, totalHeight: 24, totalWidth: width.value };
+});
+</script>
+
+<template>
+  <div ref="root" class="pl-ag-chart-histogram-cell">
+    <PlChartHistogram v-if="settings" :settings="settings" />
+    <div v-else class="pl-ag-chart-histogram-cell__not-ready ">Not ready</div>
+  </div>
+</template>
+
+<style>
+.pl-ag-chart-histogram-cell {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.pl-ag-chart-histogram-cell__not-ready {
+  color: var(--txt-03) !important;
+}
+</style>

package/src/components/PlAgChartHistogramCell/index.ts

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

package/src/components/PlAgChartStackedBarCell/PlAgChartStackedBarCell.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { ICellRendererParams } from 'ag-grid-enterprise';
 import type {
-  PlChartStackedBarSettings } from '@milaboratories/uikit';
+  PlChartStackedBarSettings,
+} from '@milaboratories/uikit';
 import {
   PlChartStackedBarCompact,
 } from '@milaboratories/uikit';
@@ -17,6 +18,7 @@ const settings = computed(() => props.params.value || undefined);
 <template>
   <div class="pl-ag-chart-stacked-bar-cell">
     <PlChartStackedBarCompact v-if="settings" :settings="settings" />
+    <div v-else class="pl-ag-chart-stacked-bar-cell__not-ready">Not ready</div>
   </div>
 </template>
 
@@ -27,4 +29,8 @@ const settings = computed(() => props.params.value || undefined);
   flex-direction: row;
   align-items: center;
 }
+
+.pl-ag-chart-stacked-bar-cell__not-ready {
+  color: var(--txt-03) !important;
+}
 </style>

package/src/lib.ts

@@ -13,6 +13,7 @@ export * from './components/PlAgCellFile';
 export * from './components/PlAgCellProgress';
 export * from './components/PlAgCellStatusTag';
 export * from './components/PlAgChartStackedBarCell';
+export * from './components/PlAgChartHistogramCell';
 
 export * from './components/PlAgDataTable/types';
 export * from './components/PlAgDataTable/sources/row-number';