@fluid-topics/ft-chart 0.0.88

package/README.md

@@ -0,0 +1,29 @@
+Display charts from datas
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-chart
+yarn add @fluid-topics/ft-chart
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-chart"
+
+function render() {
+    return html` <ft-chart 
+        xAxisName="date"
+        yAxisName="items" 
+        valueLabels="['items', 'errors']",
+        valueSingular="['item', 'error']",
+        barChart
+        period="DAY"
+        data="[[1643673600, 120, 1], [1643760000, 1, 32], [1643846400, 150, 42],
+         [1643932800, 80, 61], [1644019200, 70, 69], [1644105600, 110, 98], 
+         [1644192000, 130, 123]]" >
+    </ft-chart> `
+}
+```

package/build/ft-chart.d.ts

@@ -0,0 +1,45 @@
+import { PropertyValues } from 'lit';
+import { FtLitElement } from '@fluid-topics/ft-wc-utils';
+import { EChartsType } from "echarts/core";
+declare global {
+    interface Window {
+        echarts?: {
+            init: (dom: HTMLElement, theme?: string | object, opts?: any) => EChartsType;
+        };
+    }
+}
+export interface FtChartProperties {
+    xAxisName: string;
+    yAxisName: string;
+    valueLabels?: string[];
+    valueLabelsSingular?: string[];
+    barChart: boolean;
+    period: Period;
+    data: number[][];
+}
+export declare enum Period {
+    DAY = "DAY",
+    WEEK = "WEEK",
+    MONTH = "MONTH"
+}
+export declare class FtChart extends FtLitElement implements FtChartProperties {
+    getStyles(): import("lit").CSSResult;
+    xAxisName: string;
+    yAxisName: string;
+    valueLabels?: string[];
+    valueLabelsSingular?: string[];
+    barChart: boolean;
+    period: Period;
+    data: number[][];
+    private container;
+    private myChart?;
+    getTemplate(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(props: PropertyValues): void;
+    private getOptions;
+    private getTooltip;
+    private isThisPeriod;
+    private getSeries;
+    private getData;
+}
+//# sourceMappingURL=ft-chart.d.ts.map

package/build/ft-chart.js

@@ -0,0 +1,199 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement, FtLitElement, jsonProperty } from '@fluid-topics/ft-wc-utils';
+import * as moment from 'moment';
+if (window.echarts == null) {
+    console.warn("Echarts is not available");
+}
+export var Period;
+(function (Period) {
+    Period["DAY"] = "DAY";
+    Period["WEEK"] = "WEEK";
+    Period["MONTH"] = "MONTH";
+})(Period || (Period = {}));
+let FtChart = class FtChart extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.xAxisName = 'date';
+        this.yAxisName = '';
+        this.valueLabels = undefined;
+        this.valueLabelsSingular = undefined;
+        this.barChart = false;
+        this.period = Period.DAY;
+        this.data = [];
+    }
+    getStyles() {
+        // language=CSS
+        return css `
+          .sessions-chart {
+            height: 100%;
+            width: 100%;
+          }
+        `;
+    }
+    getTemplate() {
+        return html `
+          <div class="sessions-chart"></div>
+        `;
+    }
+    firstUpdated(_changedProperties) {
+        var _a;
+        super.firstUpdated(_changedProperties);
+        this.myChart = (_a = window.echarts) === null || _a === void 0 ? void 0 : _a.init(this.container, undefined, { renderer: 'svg' });
+    }
+    updated(props) {
+        super.updated(props);
+        const option = this.getOptions();
+        option && this.myChart && this.myChart.setOption(option);
+    }
+    getOptions() {
+        const self = this;
+        return {
+            tooltip: {
+                trigger: 'axis',
+                formatter(params) {
+                    return self.getTooltip(params);
+                }
+            },
+            grid: {
+                left: '80px',
+                right: '100px',
+                top: '50px',
+                bottom: '20px',
+            },
+            xAxis: {
+                type: 'category',
+                name: this.xAxisName.toUpperCase(),
+                axisTick: {
+                    alignWithLabel: true
+                },
+                axisLabel: {
+                    formatter(value) {
+                        if (self.period === Period.DAY || self.period === Period.WEEK) {
+                            return moment.utc(value * 1000).format('DD MMM YYYY');
+                        }
+                        if (self.period === Period.MONTH) {
+                            return moment.utc(value * 1000).format('MMMM YYYY');
+                        }
+                        // Defaults to month
+                        return moment.utc(value * 1000).format('MMMM YYYY');
+                    }
+                }
+            },
+            yAxis: {
+                type: 'value',
+                name: this.yAxisName.toUpperCase()
+            },
+            series: this.getSeries()
+        };
+    }
+    getTooltip(params) {
+        const date = moment.utc(params[0].data.value[0] * 1000);
+        const numbers = params.map(param => param.data.value[1]);
+        let dateStr;
+        let prefix;
+        let suffix = '';
+        switch (this.period) {
+            case Period.DAY: {
+                dateStr = date.format('DD MMM YYYY');
+                prefix = 'on';
+                if (this.isThisPeriod(date, Period.DAY)) {
+                    suffix = ' so far';
+                }
+                break;
+            }
+            case Period.WEEK: {
+                dateStr = date.format('DD MMM YYYY');
+                prefix = 'during the week of';
+                if (this.isThisPeriod(date, Period.WEEK)) {
+                    suffix = ' so far';
+                }
+                break;
+            }
+            case Period.MONTH: {
+                prefix = 'in';
+                dateStr = date.format('MMMM YYYY');
+                if (this.isThisPeriod(date, Period.MONTH)) {
+                    suffix = ' so far';
+                }
+                break;
+            }
+        }
+        let result = '';
+        for (let _i = 0; _i < numbers.length; _i++) {
+            let label = this.valueLabels ? this.valueLabels[_i] : this.yAxisName;
+            let singularLabel = this.valueLabelsSingular ? this.valueLabelsSingular[_i] : label;
+            const itemStr = numbers[_i] === 1 ? singularLabel : label;
+            result += `${numbers[_i]} ${itemStr} ${prefix} ${dateStr}${suffix}</br>`;
+        }
+        return result.substring(0, result.length - 5);
+    }
+    isThisPeriod(date, period, now = moment.utc()) {
+        switch (period) {
+            case Period.DAY:
+                return date.format('YYYY-MM-DD') === now.clone().startOf('day').format('YYYY-MM-DD');
+            case Period.WEEK:
+                return date.clone().startOf('isoWeek').format('YYYY-MM-DD') === now.clone().startOf('isoWeek').format('YYYY-MM-DD');
+            case Period.MONTH:
+                return date.month() === now.month() && date.year() === now.year();
+        }
+        return false;
+    }
+    getSeries() {
+        if (this.data.length == 0) {
+            return [];
+        }
+        const nbSeries = this.data[0].length - 1;
+        if (nbSeries == 0) {
+            return [];
+        }
+        let series = [];
+        for (let _i = 0; _i < nbSeries; _i++) {
+            series[_i] = {
+                type: this.barChart ? 'bar' : 'line',
+                data: this.getData(_i)
+            };
+        }
+        return series;
+    }
+    getData(valueIndex) {
+        return this.data.map(v => {
+            return { value: [v[0], v[valueIndex + 1]] };
+        });
+    }
+};
+__decorate([
+    property({ type: String })
+], FtChart.prototype, "xAxisName", void 0);
+__decorate([
+    property({ type: String })
+], FtChart.prototype, "yAxisName", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtChart.prototype, "valueLabels", void 0);
+__decorate([
+    jsonProperty(undefined)
+], FtChart.prototype, "valueLabelsSingular", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtChart.prototype, "barChart", void 0);
+__decorate([
+    property({ type: String })
+], FtChart.prototype, "period", void 0);
+__decorate([
+    jsonProperty([])
+], FtChart.prototype, "data", void 0);
+__decorate([
+    query('.sessions-chart')
+], FtChart.prototype, "container", void 0);
+FtChart = __decorate([
+    customElement('ft-chart')
+], FtChart);
+export { FtChart };
+//# sourceMappingURL=ft-chart.js.map

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@fluid-topics/ft-chart",
+  "version": "0.0.88",
+  "description": "Display charts from data",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/ft-chart.js",
+  "web": "build/ft-chart.min.js",
+  "typings": "build/ft-chart",
+  "files": [
+    "build/*.ts",
+    "build/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/ft-wc-utils": "^0.0.88",
+    "lit": "^2.0.2",
+    "moment": "^2.25.3"
+  },
+  "devDependencies": {
+    "echarts": "^5.3.0"
+  },
+  "peerDependencies": {
+    "echarts": "^5.3.0"
+  },
+  "gitHead": "220e53dba55dfa1de1560abbc30067555f72198c"
+}