@kizmann/nano-ui 1.1.0 → 1.1.2

package/src/chart/src/chart-bar/chart-bar.jsx

@@ -0,0 +1,344 @@
+import { Arr, Any, Num, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NChartBar',
+
+    provide()
+    {
+        return {
+            NChart: this
+        };
+    },
+
+    props: {
+
+        sort: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        color: {
+            default()
+            {
+                return 10;
+            },
+            type: [Number]
+        },
+
+        colorLimit: {
+            default()
+            {
+                return 19;
+            },
+            type: [Number]
+        },
+
+        label: {
+            default()
+            {
+                return Locale.trans('Total');
+            },
+            type: [String]
+        },
+
+        otherLabel: {
+            default()
+            {
+                return Locale.trans('Other');
+            },
+            type: [String]
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        limit: {
+            default()
+            {
+                return 4;
+            },
+            type: [Number]
+        },
+
+        minHeight: {
+            default()
+            {
+                return 5;
+            },
+            type: [Number]
+        },
+
+        renderLegend: {
+            default()
+            {
+                return true;
+            },
+            type: [Boolean]
+        }
+
+    },
+
+    computed: {
+
+        total()
+        {
+            let count = Arr.each(this.elements, (item) => {
+                return Num.float(item.value);
+            });
+
+            return Num.combine(count);
+        },
+
+        min()
+        {
+            let min = Number.MAX_VALUE;
+
+            Arr.each(this.elements, (item) => {
+                min = Math.min(min, Num.float(item.value));
+            });
+
+            return Num.float(min);
+        },
+
+        max()
+        {
+            let max = Number.MIN_VALUE;
+
+            Arr.each(this.elements, (item) => {
+                max = Math.max(max, Num.float(item.value));
+            });
+
+            return Num.float(max);
+        }
+
+    },
+
+    data()
+    {
+        return {
+            elements: []
+        };
+    },
+
+    methods: {
+
+        appendElement(element)
+        {
+            this.index = -1;
+
+            Arr.add(this.elements, element, {
+                uid: element.uid
+            });
+        },
+
+        removeElement(checkbox)
+        {
+            this.index = -1;
+
+            Arr.remove(this.elements, {
+                uid: checkbox.uid
+            });
+        },
+
+    },
+
+    renderBarItem(item, index)
+    {
+        let classList = [
+            'n-chart-item', item.getClass(index),
+        ];
+
+        let height = ((100 - this.minHeight) / this.max * item.value) + this.minHeight;
+
+        let style = {
+            '--n-chart-height': Num.int(height) + '%'
+        };
+
+        let html = [];
+
+        html.push(
+            <div class="n-chart-bar__bar">
+                {/* Chart bar */}
+            </div>
+        );
+
+        html.push(
+            <div class="n-chart-bar__dot">
+                {/* Chart dor */}
+            </div>
+        );
+
+        html.push(
+            <div class="n-chart-bar__value">
+                <span>{item.axis}</span>
+                <span>{item.value}</span>
+            </div>
+        );
+
+        return (
+            <div class={classList} style={style}>
+                {html}
+            </div>
+        );
+    },
+
+    renderBarOther(hidden, visible)
+    {
+        if ( Any.isEmpty(hidden) ) {
+            return null;
+        }
+
+        let count = Arr.each(hidden, (item) => {
+            return Num.float(item.value);
+        });
+
+        let item = {
+            axis: this.otherLabel, value: Num.combine(count)
+        };
+
+        item['getClass'] = () => {
+            return 'n-chart-item--other';
+        };
+
+        return this.ctor('renderBarItem')(item, visible.length);
+    },
+
+    renderBars()
+    {
+        let [elements, sorted] = [
+            Arr.clone(this.elements), Arr.sort(this.elements, 'value').reverse()
+        ];
+
+        if ( this.sort ) {
+            elements = Arr.clone(sorted);
+        }
+
+        let temp = Arr.splice(sorted, 0, this.limit || elements.length);
+
+        let visible = Arr.filter(elements, (el) => {
+            return !! Arr.find(temp, { uid: el.uid});
+        });
+
+        let hidden = Arr.filter(elements, (el) => {
+            return ! Arr.find(temp, { uid: el.uid});
+        });
+
+        [this.vis, this.hid] = [
+            visible, hidden
+        ];
+
+        let items = Arr.each(visible, (item, index) => {
+            return this.ctor('renderBarItem')(item, index);
+        });
+
+        let othersHtml = this.ctor('renderBarOther')(...[
+            this.hid, this.vis
+        ]);
+
+        return (
+            <div class="n-chart-bar__bars">
+                {[...items, othersHtml]}
+            </div>
+        );
+    },
+
+    renderAxis()
+    {
+        return (
+            <div class="n-chart-bar__axis">
+                <span>{this.max}</span>
+                <span>{this.min}</span>
+            </div>
+        );
+    },
+
+    renderLegendOther(hidden, visible)
+    {
+        if ( Any.isEmpty(hidden) ) {
+            return null;
+        }
+
+        let count = Arr.each(hidden, (item) => {
+            return Num.float(item.value);
+        });
+
+        let item = {
+            axis: this.otherLabel, value: Num.combine(count)
+        };
+
+        item['getClass'] = () => {
+            return 'n-chart-legend--other';
+        };
+
+        return this.ctor('renderLegendItem')(item, visible.length);
+    },
+
+    renderLegendItem(item, index)
+    {
+        let classList = [
+            'n-chart-legend',
+            item.getClass(index, 'n-chart-legend')
+        ];
+
+        return (
+            <div class={classList}>
+                <span>{item.axis}</span>
+                <span>{item.value}</span>
+            </div>
+        );
+    },
+
+    renderLegend()
+    {
+        if ( ! this.renderLegend ) {
+            return null;
+        }
+
+        let items = Arr.each(this.vis, (item, index) => {
+            return this.ctor('renderLegendItem')(item, index);
+        });
+
+        let othersHtml = this.ctor('renderLegendOther')(...[
+            this.hid, this.vis
+        ]);
+
+        return (
+            <div class="n-chart-bar__legend">
+                {[...items, othersHtml]}
+            </div>
+        )
+    },
+
+    render()
+    {
+        let classList = [
+            'n-chart-bar',
+            'n-chart-bar--' + this.size,
+        ];
+
+        let bodyHtml = [
+            this.ctor('renderBars')(),
+            this.ctor('renderLegend')(),
+        ];
+
+        if ( this.$slots.default ) {
+            bodyHtml.push(this.$slots.default());
+        }
+
+        return (
+            <div class={classList}>
+                {bodyHtml}
+            </div>
+        );
+    }
+
+}

package/src/chart/src/chart-bar/chart-bar.scss

@@ -0,0 +1,143 @@
+@use "../../../root/helpers" as *;
+
+.n-chart-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+}
+
+.n-chart-bar__bars {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    padding-top: size('base-pad-vertical', 'calc($ * 0.5)');
+    font-size: size('base-fnt');
+    min-height: size('base-hgt', 'calc($ * 6)');
+}
+
+.n-chart-bar .n-chart-bar__axis {
+    position: relative;
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    text-align: right;
+    padding: 0 size('base-pad', 'calc($ * 0.6)') size('base-hgt');
+}
+
+.n-chart-bar .n-chart-bar__axis span {
+    color: color('text', 0.6);
+    line-height: size('base-hgt-inline');
+    font-size: size('base-fnt-label');
+}
+
+.n-chart-bar .n-chart-bar__axis span:first-child {
+    margin-bottom: auto;
+}
+
+.n-chart-bar .n-chart-bar__axis span:last-child {
+    margin-top: auto;
+}
+
+.n-chart-bar .n-chart-item {
+    position: relative;
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 0 size('base-pad', 'calc($ * 0.6)');
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__bar {
+    flex: 1 1 auto;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-height: 0;
+    background: color('gray-50', 0.05);
+    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)');
+    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');
+    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;
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__dot {
+    height: size('base-hgt-inline');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__dot:before {
+    content: '\00a0';
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-radius: 500px;
+    background: color('text', 0.3);
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__value {
+    pointer-events: none;
+    z-index: 200;
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    padding: size('base-pad-vertical') size('base-pad');
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    opacity: 0;
+    background: color('popover');
+    transform: translate(-50%, 30%) scale(0.7);
+    border-radius: size('base-rad');
+    transition: opacity 0.2s, transform 0.2s;
+    box-shadow: 0 0 15px color('shadow', 0.1);
+}
+
+.n-chart-bar .n-chart-item:hover .n-chart-bar__value {
+    opacity: 1;
+    transform: translate(-50%, 30%) scale(1);
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__value span:first-child {
+    font-size: 0.90em;
+    color: color('text', 0.6);
+}
+
+.n-chart-bar .n-chart-item .n-chart-bar__value span:last-child {
+    font-size: 1em;
+    font-weight: bold;
+    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)');
+}