npm - @operato/scene-chartjs - Versions diffs - 0.0.5 - Mend

@operato/scene-chartjs 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/CHANGELOG.md +17 -0
package/LICENSE +21 -0
package/README.md +21 -0
package/assets/bar-chart.png +0 -0
package/assets/doughnut-chart.png +0 -0
package/assets/horizontal-bar-chart.png +0 -0
package/assets/line-chart.png +0 -0
package/assets/mixed-chart.png +0 -0
package/assets/pie-chart.png +0 -0
package/assets/polar-area-chart.png +0 -0
package/assets/radar-chart.png +0 -0
package/demo/bar.html +266 -0
package/demo/chartjs.html +73 -0
package/demo/index.html +547 -0
package/demo/legend.html +267 -0
package/demo/things-scene-chartjs.html +7 -0
package/dist/chartjs.d.ts +27 -0
package/dist/chartjs.js +109 -0
package/dist/chartjs.js.map +1 -0
package/dist/config-converter.d.ts +1 -0
package/dist/config-converter.js +343 -0
package/dist/config-converter.js.map +1 -0
package/dist/editors/index.d.ts +5 -0
package/dist/editors/index.js +11 -0
package/dist/editors/index.js.map +1 -0
package/dist/editors/property-editor-chartjs-abstract.d.ts +44 -0
package/dist/editors/property-editor-chartjs-abstract.js +250 -0
package/dist/editors/property-editor-chartjs-abstract.js.map +1 -0
package/dist/editors/property-editor-chartjs-hbar.d.ts +9 -0
package/dist/editors/property-editor-chartjs-hbar.js +160 -0
package/dist/editors/property-editor-chartjs-hbar.js.map +1 -0
package/dist/editors/property-editor-chartjs-mixed.d.ts +20 -0
package/dist/editors/property-editor-chartjs-mixed.js +193 -0
package/dist/editors/property-editor-chartjs-mixed.js.map +1 -0
package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +31 -0
package/dist/editors/property-editor-chartjs-multi-series-abstract.js +373 -0
package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +1 -0
package/dist/editors/property-editor-chartjs-pie.d.ts +14 -0
package/dist/editors/property-editor-chartjs-pie.js +70 -0
package/dist/editors/property-editor-chartjs-pie.js.map +1 -0
package/dist/editors/property-editor-chartjs-radar.d.ts +10 -0
package/dist/editors/property-editor-chartjs-radar.js +42 -0
package/dist/editors/property-editor-chartjs-radar.js.map +1 -0
package/dist/editors/property-editor-chartjs-styles.d.ts +1 -0
package/dist/editors/property-editor-chartjs-styles.js +165 -0
package/dist/editors/property-editor-chartjs-styles.js.map +1 -0
package/dist/editors/property-editor-chartjs.d.ts +14 -0
package/dist/editors/property-editor-chartjs.js +83 -0
package/dist/editors/property-editor-chartjs.js.map +1 -0
package/dist/index.d.ts +5 -0
package/dist/index.js +8 -0
package/dist/index.js.map +1 -0
package/dist/ox-chart.d.ts +20 -0
package/dist/ox-chart.js +137 -0
package/dist/ox-chart.js.map +1 -0
package/dist/plugins/chart-series-highlight.d.ts +5 -0
package/dist/plugins/chart-series-highlight.js +37 -0
package/dist/plugins/chart-series-highlight.js.map +1 -0
package/dist/plugins/chartjs-plugin-data-binder.d.ts +5 -0
package/dist/plugins/chartjs-plugin-data-binder.js +111 -0
package/dist/plugins/chartjs-plugin-data-binder.js.map +1 -0
package/helps/scene/component/chartjs.ko.md +332 -0
package/helps/scene/component/chartjs.md +333 -0
package/helps/scene/component/chartjs.zh.md +331 -0
package/helps/scene/images/chart-bar-01.png +0 -0
package/helps/scene/images/chart-bar-02.png +0 -0
package/helps/scene/images/chart-bar-03.png +0 -0
package/helps/scene/images/chart-bar-08.png +0 -0
package/helps/scene/images/chart-bar-12.png +0 -0
package/helps/scene/images/chart-data-01.png +0 -0
package/helps/scene/images/chart-data-04.png +0 -0
package/helps/scene/images/chart-doughnut-01.png +0 -0
package/helps/scene/images/chart-horizontal-bar-01.png +0 -0
package/helps/scene/images/chart-line-01.png +0 -0
package/helps/scene/images/chart-mix-01.png +0 -0
package/helps/scene/images/chart-mix-02.png +0 -0
package/helps/scene/images/chart-pie-01.png +0 -0
package/helps/scene/images/chart-polar-01.png +0 -0
package/helps/scene/images/chart-radar-01.png +0 -0
package/package.json +78 -0
package/src/chartjs.ts +134 -0
package/src/config-converter.ts +401 -0
package/src/editors/index.ts +11 -0
package/src/editors/property-editor-chartjs-abstract.ts +301 -0
package/src/editors/property-editor-chartjs-hbar.ts +163 -0
package/src/editors/property-editor-chartjs-mixed.ts +204 -0
package/src/editors/property-editor-chartjs-multi-series-abstract.ts +393 -0
package/src/editors/property-editor-chartjs-pie.ts +79 -0
package/src/editors/property-editor-chartjs-radar.ts +43 -0
package/src/editors/property-editor-chartjs-styles.ts +165 -0
package/src/editors/property-editor-chartjs.ts +88 -0
package/src/index.ts +7 -0
package/src/ox-chart.ts +150 -0
package/src/plugins/chart-series-highlight.ts +43 -0
package/src/plugins/chartjs-plugin-data-binder.ts +138 -0
package/src/scene-chart.d.ts +152 -0
package/templates/bar-chart.js +124 -0
package/templates/doughnut-chart.js +58 -0
package/templates/horizontal-bar-chart.js +121 -0
package/templates/index.js +22 -0
package/templates/line-chart.js +155 -0
package/templates/mixed-chart.js +152 -0
package/templates/pie-chart.js +58 -0
package/templates/polar-area-chart.js +92 -0
package/templates/radar-chart.js +98 -0
package/test/basic-test.html +61 -0
package/test/index.html +20 -0
package/things-scene.config.js +7 -0
package/translations/en.json +5 -0
package/translations/ko.json +5 -0
package/translations/ms.json +5 -0
package/translations/zh.json +5 -0
package/tsconfig.json +22 -0
package/tsconfig.tsbuildinfo +1 -0

package/demo/legend.html ADDED Viewed

@@ -0,0 +1,267 @@
+<!doctype html>
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>things-scene-chartjs Demo</title>
+    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../bower_components/things-scene-viewer/things-scene-viewer.html">
+    <link rel="import" href="../bower_components/things-scene-viewer/things-scene-layer.html">
+    <link rel="import" href="../bower_components/things-scene-viewer/things-scene-handler.html">
+    <link rel="import" href="../bower_components/things-designer-elements/elements.html">
+    <link rel="import" href="../bower_components/things-scene-modeler/things-scene-properties.html">
+    <link rel="import" href="./things-scene-chartjs.html">
+    <style is="custom-style">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("fonts/VeraSeBd.ttf");
+    }
+    things-scene-viewer {
+      display: block;
+      width: 640px;
+      height: 480px;
+    }
+    </style>
+  </head>
+  <body unresolved>
+    <template is="dom-bind" id="app">
+      <p>An example of <code>&lt;things-scene-chartjs&gt;</code>:</p>
+      <things-scene-viewer id='scene' scene='{{scene}}' model='[[model]]' selected='{{selected}}'>
+        <things-scene-layer type="selection-layer"></things-scene-layer>
+        <things-scene-layer type="modeling-layer"></things-scene-layer>
+        <things-scene-handler type="text-editor"></things-scene-handler>
+        <things-scene-handler type="move-handler"></things-scene-handler>
+      </things-scene-viewer>
+      <button id="change">Change Value</button>
+      <button id="change-model">Change Model</button>
+      <fieldset>
+        <legend>Chart.js properties</legend>
+        <things-scene-properties id="properties"
+                                 scene="[[scene]]"
+                                 selected="[[selected]]"
+                                 model="{{target}}"
+                                 bounds="{{bounds}}"
+                                 props="{{props}}">
+          <things-editor-properties id="properties"
+                                   target="{{target}}"
+                                   props="{{props}}">
+          </things-editor-properties>
+        </things-scene-properties>
+      </fieldset>
+    </template>
+    <canvas id="chartCanvas" width="300" height="300">
+    </canvas>
+    <script>
+      window.addEventListener('WebComponentsReady', function(e) {
+        var app = document.querySelector('#app')
+        app.$.change.addEventListener('click', function() {
+          var viewer = app.$.scene
+          app.selected[0].set('data', [
+          	{
+          		"date": "2016-11-10",
+          		"inQty": "712882",
+          		"badQty": "0"
+          	},
+          	{
+          		"date": "2016-11-11",
+          		"inQty": "526234",
+          		"badQty": "0"
+          	},
+          	{
+          		"date": "2016-11-12",
+          		"inQty": "701163",
+          		"badQty": "8837"
+          	}
+          ])
+        })
+        app.$['change-model'].addEventListener('click', function() {
+          var viewer = app.$.scene
+          var selected = app.selected[0]
+          var chartModel = JSON.parse(JSON.stringify(selected.model.chart))
+          chartModel.data.datasets.push({
+            label:'add',
+            backgroundColor: 'red',
+            data: []
+          })
+          selected.set('chart', chartModel)
+        })
+        app.$.properties.addEventListener('change', function(e) {
+          console.log('change', e, app.$.properties.model)
+        })
+        Chart.defaults.global.tooltips.mode = 'label';
+        app.props = [{
+          type: 'number',
+          label: 'Font Size',
+          name: 'chart.options.fontSize',
+          property: 'number'
+        },{
+          type: 'number',
+          label: 'Width',
+          name: 'width',
+          property: 'number'
+        }, {
+          type: 'number',
+          label: 'Height',
+          name: 'height',
+          property: 'number'
+        }, {
+          type: 'number',
+          label: 'Tension',
+          name: 'chart.data.datasets.0.lineTension',
+          property: 'number'
+        }, {
+          type: 'color',
+          label: 'Border Color',
+          name: 'chart.data.datasets.0.borderColor',
+          property: 'color'
+        }, {
+          type: 'multiple-color',
+          label: 'Background Color',
+          name: 'chart.data.datasets.0.backgroundColor',
+          property: {
+            colorType: 'array'
+          }
+        }, {
+          type: 'number',
+          label: 'Border Width',
+          name: 'chart.data.datasets.0.borderWidth',
+          property: 'number'
+        }, {
+          type: 'color',
+          label: 'Point Border Color',
+          name: 'chart.data.datasets.0.pointBorderColor',
+          property: 'color'
+        }, {
+          type: 'color',
+          label: 'Point Background Color',
+          name: 'chart.data.datasets.0.pointBackgroundColor',
+          property: 'color'
+        }, {
+          type: 'number',
+          label: 'Point Border Width',
+          name: 'chart.data.datasets.0.pointBorderWidth',
+          property: 'number'
+        }, {
+          type: 'checkbox',
+          label: 'Fill',
+          name: 'chart.data.datasets.0.fill',
+          property: 'checkbox'
+        }, {
+          type: 'checkbox',
+          label: 'X Axis Grid Line',
+          name: 'chart.options.scales.xAxes.0.gridLines.display',
+          property: 'checkbox'
+        }, {
+          type: 'string',
+          label: 'Theme',
+          name: 'chart.options.theme',
+          property: 'string'
+        }, {
+          type: 'checkbox',
+          label: 'Show Legend',
+          name: 'chart.options.legend.display',
+          property: 'checkbox'
+        }, {
+          type: 'string',
+          label: 'Legend Position',
+          name: 'chart.options.legend.position',
+          property: 'string'
+        }, {
+          type: 'checkbox',
+          label: 'is Stacked',
+          name: 'chart.options.stacked',
+          property: 'checkbox'
+        }, {
+          type: 'checkbox',
+          label: 'Multi Axis',
+          name: 'chart.options.multiAxis',
+          property: 'checkbox'
+        }]
+        app.model = {
+          width: 500,
+          height: 500,
+          components: [{
+            type: 'chartjs',
+            top: 50,
+            left: 50,
+            width: 400,
+            height: 400,
+            fontColor: '#FF0000',
+            lineWidth: 5,
+            chart: {
+              type: 'bar',
+              data: {
+                labels: [],
+                datasets: [{
+                  type: 'line',
+                  label: 'Line Dataset',
+                  yAxisID: 'left',
+                  borderColor: 'red',
+                  fill: false,
+                  data: []
+                }, {
+                  type: 'bar',
+                  label: 'Bar Dataset',
+                  yAxisID: 'right',
+                  borderColor: 'blue',
+                  backgroundColor: 'blue',
+                  data: []
+                }]
+              },
+              options: {
+                multiAxis: true,
+                legend: {
+                  display: true,
+                  position: 'top'
+                },
+                scales: {
+                  xAxes: [{
+                    position: 'bottom',
+                    gridLines: {
+                      display: true
+                    }
+                  }],
+                  yAxes: [{
+                    position: 'left',
+                    id: 'left'
+                  }, {
+                    position: 'right',
+                    id: 'right'
+                  }]
+                }
+              }
+            },
+            data : {
+              seriesData : [
+                [0, 10, 5, 3, 6],
+                [100, 10, 60, 30, 50]
+              ],
+              labelData : ['a', 'b', 'c', 'd', 'e' ]
+            }
+          }]
+        }
+      });
+    </script>
+  </body>
+</html>

package/demo/things-scene-chartjs.html ADDED Viewed

@@ -0,0 +1,7 @@
+<!--
+@license
+Copyright © HatioLab Inc. All rights reserved.
+-->
+<script src="../bower_components/Chart.JS/dist/Chart.js"></script>
+<script src="../bower_components/TinyColor/dist/tinycolor-min.js"></script>
+<script src="../things-scene-chartjs.js"></script>

package/dist/chartjs.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import './ox-chart';
+import { HTMLOverlayElement, Properties } from '@hatiolab/things-scene';
+import { OxChart } from './ox-chart';
+export default class ChartJS extends HTMLOverlayElement {
+    private _isChartChanged;
+    private _isDataChanged;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+        'value-property': string;
+        help: string;
+    };
+    get hasTextProperty(): boolean;
+    get tagName(): string;
+    isShadowable(): boolean;
+    createElement(): void;
+    setElementProperties(element: OxChart): void;
+    _setChartConfig(element: OxChart): void;
+    onchange(after: Properties, before: Properties): void;
+    onchangeData(data: any): void;
+}

package/dist/chartjs.js ADDED Viewed

@@ -0,0 +1,109 @@
+import './ox-chart';
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, HTMLOverlayElement, error } from '@hatiolab/things-scene';
+import cloneDeep from 'lodash/cloneDeep';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'chartjs',
+            label: '',
+            name: 'chart'
+        }
+    ],
+    'value-property': 'data',
+    help: 'scene/component/chartjs'
+};
+export default class ChartJS extends HTMLOverlayElement {
+    constructor() {
+        super(...arguments);
+        this._isChartChanged = false;
+        this._isDataChanged = false;
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+    get tagName() {
+        return 'ox-chart';
+    }
+    isShadowable() {
+        return false;
+    }
+    createElement() {
+        super.createElement();
+        var { width, height } = this.bounds;
+        var element = this.element;
+        var data = this.data;
+        element.width = width;
+        element.height = height;
+        this._setChartConfig(element);
+        element.data = data;
+    }
+    /* component.property => element.property */
+    setElementProperties(element) {
+        this.set('lineWidth', 0); // border 표현이 자연스럽게 바뀌면 지울것.
+        var { chart: chartConfig } = this.state;
+        var { width, height } = this.bounds;
+        var data = this.data;
+        try {
+            element.width = width;
+            element.height = height;
+            if (chartConfig && this._isChartChanged) {
+                this._setChartConfig(element);
+                this._isChartChanged = false;
+            }
+            if (this._isDataChanged) {
+                element.data = data;
+                this._isDataChanged = false;
+            }
+        }
+        catch (e) {
+            error(e);
+        }
+    }
+    _setChartConfig(element) {
+        var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state;
+        var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {};
+        const fontOption = {
+            defaultFontSize: fontSize,
+            defaultFontFamily: fontFamily,
+            defaultFontColor: fontColor
+        };
+        const shadowOption = {
+            shadowOffsetX: left,
+            shadowOffsetY: top,
+            shadowBlur: blurSize,
+            shadowColor: color
+        };
+        var cloneChartConf = cloneDeep(chartConfig);
+        cloneChartConf.options = {
+            ...cloneChartConf.options,
+            ...fontOption
+        };
+        cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset) => {
+            return {
+                ...dataset,
+                ...shadowOption
+            };
+        });
+        element.options = cloneChartConf;
+    }
+    onchange(after, before) {
+        this._isChartChanged = false;
+        if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)
+            this._isChartChanged = true;
+        super.onchange(after, before);
+    }
+    onchangeData(data) {
+        this._isDataChanged = true;
+    }
+}
+Component.register('chartjs', ChartJS);
+//# sourceMappingURL=chartjs.js.map

package/dist/chartjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-chart'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, HTMLOverlayElement, Properties, error } from '@hatiolab/things-scene'\n\nimport { OxChart } from './ox-chart'\nimport cloneDeep from 'lodash/cloneDeep'\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'chartjs',\n label: '',\n name: 'chart'\n }\n ],\n 'value-property': 'data',\n help: 'scene/component/chartjs'\n}\n\nexport default class ChartJS extends HTMLOverlayElement {\n private _isChartChanged = false\n private _isDataChanged = false\n\n get nature() {\n return NATURE\n }\n\n get hasTextProperty() {\n return false\n }\n\n get tagName() {\n return 'ox-chart'\n }\n\n isShadowable() {\n return false\n }\n\n createElement() {\n super.createElement()\n\n var { width, height } = this.bounds\n var element = this.element as OxChart\n var data = this.data\n\n element.width = width\n element.height = height\n\n this._setChartConfig(element)\n element.data = data\n }\n\n /* component.property => element.property */\n setElementProperties(element: OxChart) {\n this.set('lineWidth', 0) // border 표현이 자연스럽게 바뀌면 지울것.\n\n var { chart: chartConfig } = this.state\n var { width, height } = this.bounds\n var data = this.data\n\n try {\n element.width = width\n element.height = height\n\n if (chartConfig && this._isChartChanged) {\n this._setChartConfig(element)\n this._isChartChanged = false\n }\n\n if (this._isDataChanged) {\n element.data = data\n this._isDataChanged = false\n }\n } catch (e) {\n error(e)\n }\n }\n\n _setChartConfig(element: OxChart) {\n var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state\n var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {}\n\n const fontOption = {\n defaultFontSize: fontSize,\n defaultFontFamily: fontFamily,\n defaultFontColor: fontColor\n }\n\n const shadowOption = {\n shadowOffsetX: left,\n shadowOffsetY: top,\n shadowBlur: blurSize,\n shadowColor: color\n }\n\n var cloneChartConf = cloneDeep(chartConfig)\n\n cloneChartConf.options = {\n ...cloneChartConf.options,\n ...fontOption\n }\n\n cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset: any) => {\n return {\n ...dataset,\n ...shadowOption\n }\n })\n\n element.options = cloneChartConf\n }\n\n onchange(after: Properties, before: Properties) {\n this._isChartChanged = false\n\n if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)\n this._isChartChanged = true\n\n super.onchange(after, before)\n }\n\n onchangeData(data: any) {\n this._isDataChanged = true\n }\n}\n\nComponent.register('chartjs', ChartJS)\n"]}

package/dist/config-converter.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function convertConfigure(chart: SceneChart.ChartConfig): void;