@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/chart/{src/chart-bar → css}/chart-bar.scss

@@ -1,54 +1,112 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-chart-bar {
-    display: flex;
-    flex-direction: row;
+    overflow: hidden;
+    display: inline-flex;
+    flex-direction: column;
     align-items: stretch;
     justify-content: stretch;
+    height: 200px;
 }
 
-.n-chart-bar__bars {
+.n-chart-bar__header {
     flex: 0 0 auto;
+    width: 100%;
     display: flex;
     flex-direction: row;
-    align-items: stretch;
-    justify-content: stretch;
-    padding-top: size('base-pad-vertical', 'calc($ * 0.5)');
+    align-items: center;
     font-size: size('base-fnt');
-    min-height: size('base-hgt', 'calc($ * 6)');
+    margin-bottom: size('base-pad-vertical', 'calc($ * 2)');
 }
 
-.n-chart-bar .n-chart-bar__axis {
-    position: relative;
-    flex: 1 1 100%;
+.n-chart-bar__body {
+    flex: 1 1 auto;
+    overflow: hidden;
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    text-align: right;
-    padding: 0 size('base-pad', 'calc($ * 0.6)') size('base-hgt');
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.n-chart-bar__total {
+    flex: 1 1 auto;
+}
+
+.n-chart-bar__total span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.n-chart-bar .n-chart-bar__axis span {
+.n-chart-bar__tag {
+    padding: size('base-pad-vertical', 'calc($ * 0.4)') size('base-pad');
+    background: color('gray-50', 0.2);
     color: color('text', 0.6);
-    line-height: size('base-hgt-inline');
-    font-size: size('base-fnt-label');
+    border-radius: size('base-rad-inline');
+}
+
+.n-chart-bar__frame {
+    flex: 1 1 auto;
+    position: relative;
+    height: 100%;
+}
+
+.n-chart-bar__legend {
+    flex: 0 0 auto;
+    height: 100%;
+    width: 230px;
+    margin-left: size('base-pad', 'calc($ * 2)');
+    background: color('gray-50', 0.2);
+    border-radius: size('base-rad-inline');
+}
+
+.n-chart-bar__legend .n-scrollbar__wrap {
+    padding: size('base-pad', 'calc($ * 1.3)') size('base-pad', 'calc($ * 1.5)');
+}
+
+.n-chart-bar__avg {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    bottom: var(--n-chart-avg);
+    display: flex;
+    align-items: center;
+    width: 100%;
 }
 
-.n-chart-bar .n-chart-bar__axis span:first-child {
-    margin-bottom: auto;
+.n-chart-bar__avg:after {
+    content: '\00a0';
+    flex: 1 1 auto;
+    display: block;
+    height: 0;
+    border-bottom: 2px dotted color('gray-50', 0.2);
 }
 
-.n-chart-bar .n-chart-bar__axis span:last-child {
-    margin-top: auto;
+.n-chart-bar__bars {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    height: 100%;
 }
 
 .n-chart-bar .n-chart-item {
     position: relative;
-    flex: 1 1 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    padding: 0 size('base-pad', 'calc($ * 0.6)');
+}
+
+.n-chart-bar .n-chart-item:not(:first-child) {
+    margin-left: size('base-pad');
+}
+
+.n-chart-bar .n-chart-item:not(:last-child) {
+    margin-right: size('base-pad');
 }
 
 .n-chart-bar .n-chart-item .n-chart-bar__bar {
@@ -56,31 +114,28 @@
     display: inline-flex;
     flex-direction: column;
     justify-content: flex-end;
+    height: 100%;
     min-height: 0;
-    background: color('gray-50', 0.05);
+    background: color('gray-50', 0.15);
     border-radius: size('base-rad-inline');
 }
 
 .n-chart-bar .n-chart-item .n-chart-bar__bar:before {
     content: '\00a0';
-    width: size('base-hgt', 'calc($ * 1.2)');
+    min-width: size('base-hgt', 'calc($ * 1.2)');
     height: 100%;
     max-height: var(--n-chart-height);
     border-radius: size('base-rad-inline');
 }
 
 .n-chart-bar .n-chart-item .n-chart-bar__bar:before {
-    background: color('base-color');
+    background: linear-gradient(0deg, color('base-color') 20%, color('base-color', 0.6) 100%);
     transition: opacity 0.2s, max-height 0.4s;
 }
 
-.n-chart-bar .n-chart-item.n-chart-item--other .n-chart-bar__bar:before {
-    background: color('foreground', 0.2);
-}
-
 .n-chart-bar .n-chart-item:hover .n-chart-bar__bar:before {
     opacity: 0.6;
-    max-height: 500px;
+    //max-height: 500px;
 }
 
 .n-chart-bar .n-chart-item .n-chart-bar__dot {
@@ -134,10 +189,25 @@
     color: color('text');
 }
 
-.n-chart-bar__legend {
-    flex: 1 1 auto;
-    min-height: 0;
-    border-left: 1px solid color('gray-05');
-    margin-left: size('base-pad', 'calc($ * 2)');
-    padding-left: size('base-pad', 'calc($ * 2.5)');
+
+
+
+
+
+.n-chart-axis {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    min-width: 40px;
+}
+
+.n-chart-axis span {
+    color: color('text', 0.6);
+    font-size: size('base-fnt-label');
+    line-height: size('base-hgt-inline');
+}
+
+.n-chart-axis span:first-child {
+    color: color('base-color');
+    font-weight: bold;
 }

package/src/chart/{src/chart-donut → css}/chart-donut.scss

@@ -1,10 +1,11 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-chart-donut {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
+    height: size('base-hgt-inline', 'calc($ * 11)');
 }
 
 .n-chart-donut__chart {
@@ -17,28 +18,10 @@
     font-size: size('base-fnt');
 }
 
-.n-chart-donut__chart:before {
-    pointer-events: none;
-    content: '\00a0';
-    z-index: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    width: size('base-hgt-inline', 'calc($ * 6.4)');
-    height: size('base-hgt-inline', 'calc($ * 6.4)');
-    border-radius: 500px;
-    transform: translate(-50%, -50%);
-}
-
 .n-chart-donut:not(.n-chart-donut--overlap) .n-chart-item {
     stroke-linecap: round;
 }
 
-.n-chart-donut:not(.n-chart-donut--overlap) .n-chart-hover {
-    stroke-linecap: square;
-}
-
 .n-chart-donut svg {
     width: 100%;
     height: auto;
@@ -54,13 +37,9 @@
 }
 
 .n-chart-donut circle.n-chart-item {
-    pointer-events: none;
-    stroke-width: var(--n-stroke-width);
-}
-
-.n-chart-donut circle.n-chart-hover {
     pointer-events: stroke;
-    stroke-width: calc(var(--n-stroke-width) * 2px);
+    stroke-width: var(--n-stroke-width);
+    transition: opacity 0.2s;
 }
 
 .n-chart-donut__base {
@@ -116,8 +95,14 @@
 }
 
 .n-chart-donut__legend {
-    flex: 1 1 auto;
-    border-left: 1px solid color('gray-05');
+    flex: 0 0 auto;
+    height: 100%;
+    width: 230px;
     margin-left: size('base-pad', 'calc($ * 2)');
-    padding-left: size('base-pad', 'calc($ * 2.5)');
+    background: color('gray-50', 0.2);
+    border-radius: size('base-rad-inline');
+}
+
+.n-chart-donut__legend .n-scrollbar__wrap {
+    padding: size('base-pad', 'calc($ * 1.3)') size('base-pad', 'calc($ * 1.5)');
 }

package/src/chart/{src/chart-item → css}/chart-item.scss

@@ -1,13 +1,14 @@
-@use "../../../root/helpers" as *;
+@use "../../root/css/helpers" as *;
 
 .n-chart-legend {
     display: flex;
     align-items: center;
-    color: color('text', 0.6);
 }
 
 .n-chart-legend:not(:last-child) {
     margin-bottom: size('base-pad-vertical');
+    padding-bottom: size('base-pad-vertical');
+    border-bottom: 1px solid color('gray-50', 0.1);
 }
 
 .n-chart-legend span:first-child {
@@ -15,6 +16,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    color: color('text', 0.8);
     font-size: size('base-fnt');
 }
 
@@ -22,7 +24,8 @@
     flex: 0 0 auto;
     font-size: size('base-fnt-label');
     display: inline-flex;
-    padding: size('base-pad-vertical', 'calc($ * 0.3)') size('base-pad', 'calc($ * 0.5)');
+    align-items: center;
+    padding: size('base-pad-vertical', 'calc($ * 0.25)') size('base-pad', 'calc($ * 0.6)');
     margin-left: size('base-pad');
     border-radius: size('base-rad-inline');
     color: color('base-color');

package/src/chart/index.scss

@@ -1,3 +1,3 @@
-@forward "./src/chart-item/chart-item";
-@forward "./src/chart-donut/chart-donut";
-@forward "./src/chart-bar/chart-bar";
+@forward "./css/chart-item";
+@forward "./css/chart-donut";
+@forward "./css/chart-bar";

package/src/chart/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import NChartBar from "./js/chart-bar/NChartBar.ts";
+import NChartDonut from "./js/chart-donut/NChartDonut.ts";
+import NChartItem from "./js/chart-item/NChartItem.ts";
+
+export default function (App : App) {
+    App.component(NChartBar.name, NChartBar);
+    App.component(NChartDonut.name, NChartDonut);
+    App.component(NChartItem.name, NChartItem);
+}

package/src/chart/js/chart-bar/NChartBar.ts

@@ -0,0 +1,91 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NChartBarController } from "./NChartBarController.ts";
+import { Locale } from "@kizmann/pico-js";
+
+export const NChartBarProps = {
+
+    ...Props.Size,
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    sort: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    limit: {
+        type: [Number], default: 4
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    legend: {
+        type: [Boolean], default: true
+    },
+
+    /**
+     * @type {PropType<number|string>}
+     */
+    color: {
+        type: [Number,String], default: 10
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    totalLabel: {
+        type: [String], default: () => Locale.trans('Total')
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    otherLabel: {
+        type: [String], default: () => Locale.trans('Other')
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    minHeight: {
+        type: [Number], default: 5
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NChartBar',
+
+    /**
+     * @type {typeof NChartBarProps}
+     */
+    props: NChartBarProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        //
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NChartBarController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/chart/js/chart-bar/NChartBarController.ts

@@ -0,0 +1,136 @@
+import { provide, SetupContext } from "vue";
+import { GroupController } from "../../../root/index.ts";
+import { NChartBarView } from "./NChartBarView.ts";
+import { NChartBarData } from "./NChartBarData.ts";
+import { Mix, Arr, Num } from "@kizmann/pico-js";
+import NChartItemController from "../chart-item/NChartItemController.ts";
+
+
+export class NChartBarController extends GroupController
+{
+    /**
+     * @type {NChartBarController}
+     */
+    declare scope : NChartBarController;
+
+    /**
+     * @type {NChartBarData}
+     */
+    declare data : NChartBarData;
+
+    /**
+     * @type {NChartBarView}
+     */
+    declare view : NChartBarView;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NChartBarView(this),
+            new NChartBarData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this.makeData('maxval');
+        this.makeData('avgval');
+        this.makeData('visible');
+        this.makeData('hidden');
+
+        provide('NChart', this.instance);
+
+        this.watchProp('limit', () => {
+            this.makeDataset();
+            this.makeMaxval();
+            this.makeAvgval();
+        });
+
+        this.watchChilds(() => {
+            this.makeDataset();
+            this.makeMaxval();
+            this.makeAvgval();
+        });
+
+        this.makeDataset();
+        this.makeMaxval();
+        this.makeAvgval();
+
+        return this;
+    }
+
+    makeDataset() : void
+    {
+        const { data } = this;
+
+        let items = !data.sort ?
+            Arr.clone(this.childs) :
+            Arr.sort(this.childs, 'data.value').reverse();
+
+        const temp = Arr.slice(...[
+            items, 0, data.limit ?? items.length
+        ]);
+
+        const visible = Arr.filter(items, (el : any) => {
+            return Arr.find(temp, { uid: el.uid }) != null;
+        });
+
+        this.set('visible', visible);
+
+        const hidden = Arr.filter(items, (el : any) => {
+            return Arr.find(temp, { uid: el.uid }) == null;
+        });
+
+        this.set('hidden', hidden);
+    }
+
+    makeMaxval() : void
+    {
+        let other = Number.MIN_VALUE;
+
+        Arr.each(this.data.hidden, (item : NChartItemController) => {
+            other += Mix.num(item.data.value);
+        });
+
+        let max = other;
+
+        Arr.each(this.data.visible, (item : NChartItemController) => {
+            max = Math.max(max, Mix.num(item.data.value));
+        });
+
+        this.set('maxval', max);
+    }
+
+    makeAvgval() : void
+    {
+        let total = 0;
+
+        Arr.each(this.childs, (item : NChartItemController) => {
+            total += Mix.num(item.data.value);
+        });
+
+        const avg = Num.fixed(...[
+            total / this.childs.length, 1
+        ]);
+
+        this.set('avgval', avg);
+    }
+
+    getHeight(value : string | number) : number
+    {
+        const { maxval, minHeight: min } = this.data;
+
+        return Num.int(...[
+            ((100 - min) / maxval * Mix.num(value)) + min
+        ]);
+    }
+
+}
+
+export default NChartBarController;

package/src/chart/js/chart-bar/NChartBarData.ts

@@ -0,0 +1,74 @@
+import { ProtoData } from "../../../root/index.ts";
+import NChartBarController from "./NChartBarController.ts";
+import NChartItemController from "../chart-item/NChartItemController.ts";
+
+export class NChartBarData extends ProtoData
+{
+    /**
+     * @type {NChartBarController}
+     */
+    declare scope : NChartBarController;
+
+    get classList() : string[]
+    {
+        return this.classRoot([]);
+    }
+
+    get visible() : NChartItemController[]
+    {
+        return this.scope.get('visible');
+    }
+
+    get hidden() : NChartItemController[]
+    {
+        return this.scope.get('hidden');
+    }
+
+    get maxval() : number
+    {
+        return this.scope.get('maxval');
+    }
+
+    get avgval() : number
+    {
+        return this.scope.get('avgval');
+    }
+
+    get sort() : boolean
+    {
+        return this.scope.get('sort');
+    }
+
+    get limit() : number
+    {
+        return this.scope.get('limit');
+    }
+
+    get legend() : boolean
+    {
+        return this.scope.get('legend');
+    }
+
+    get color() : string|number
+    {
+        return this.scope.get('color');
+    }
+
+    get totalLabel() : string
+    {
+        return this.scope.get('totalLabel');
+    }
+
+    get otherLabel() : string
+    {
+        return this.scope.get('otherLabel');
+    }
+
+    get minHeight() : number
+    {
+        return this.scope.get('minHeight');
+    }
+
+}
+
+export default NChartBarData;