@operato/scene-chartjs 0.0.5

package/helps/scene/component/chartjs.zh.md

@@ -0,0 +1,331 @@
+# **图表**
+
+## 1. 共同
+
+### 1.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 1.2. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Chart-bar-主题][chart-bar-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+  ![X 轴 Grid][chart-bar-08]
+* 显示刻度 - X轴是否显示刻度
+
+### 1.3. Y 轴
+
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+  ![Y 轴 Grid][chart-bar-12]
+* 显示刻度 -Y轴是否显示刻度
+
+---
+
+## 2. 混合图表（纵向条形图表＆折线图）
+* 通过混合条形和线形来表示数据的图表。 __（混合图的属性与条形图和折线图相同。）__
+* 数据可以用条形或线形或混合使用条形和线形来表示。 当有多个系列（字段）时，可以表示为并列条形图表或堆叠条形图表。
+  ![chart-mix-chart Type][chart-mix-02]
+
+  [chart-mix-02]: ../images/chart-mix-02.png
+
+### 2.1. 系列
+* 使用按钮“+”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 定义要由系列引用的原始数据在Y轴中表示的数据的字段名称，显示以下数据时，系列的数据键为“Good”和“Bad”。
+    ![Data Refer][chart-bar-01]
+  * 类型 - 选择折线图或条形图表示系列。
+  * 标签 - 范例标签。
+  * 颜色 - 指定系列在图表上显示的颜色。
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+    ![堆叠组][chart-bar-02]
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+    ![对象轴][chart-bar-03]
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+* **如果选择类型为折线图**
+  * 线张力 - 使用直线的图形（angled），使用平滑的图形（smooth）
+  * 线厚度 - 设置线厚度
+  * 点形状 - 线上每个顶点的点形状
+  * 点大小 - 线的每个顶点的大小
+  * 填充 - 填充线绘制的面积
+
+### 2.2. X 轴
+
+* 与[通用属性](#12-x-轴)中定义的内容相同
+* 条间距 - 条形柱之间的间隙，它会影响条形的大小。
+* 刻度间距 - 刻度之间的间隙，它会影响条形的大小。
+
+### 2.3. Y 轴
+
+* 与[通用属性](#13-y-轴)中定义的内容相同
+
+### 2.4. Y辅助轴(在多轴被勾选时显示)
+
+* 与[通用属性](#13-y-轴)中定义的内容相同
+
+
+[chart-bar-01]: ../images/chart-bar-01.png
+
+[chart-bar-02]: ../images/chart-bar-02.png
+
+[chart-bar-03]: ../images/chart-bar-03.png
+
+[chart-bar-08]: ../images/chart-bar-08.png
+
+[chart-bar-12]: ../images/chart-bar-12.png
+
+
+---
+
+## 3. 水平条形图
+
+以水平柱状图形式表示数据的图表。 当有多个字段时，可以表示为平行柱或堆叠柱。
+
+### 3.1. 通用属性  
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 3.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 定义要由系列引用的原始数据在Y轴中表示的数据的字段名称，显示以下数据时，系列的数据键为“Good”和“Bad”。
+    ![Data Refer][chart-bar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+    ![堆叠组][chart-bar-02]
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+    ![对象轴][chart-bar-03]
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 3.3. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Data Refer][chart-horizontal-bar-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+* 显示刻度 - X轴是否显示刻度
+
+### 3.4. Y 轴
+
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+* 显示刻度 -Y轴是否显示刻度
+
+
+[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
+
+---
+## 4. 折线图
+
+以线形表示数据的图表。
+
+### 4.1. Properties
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+* 多轴 - 是否表示为左右多轴，选择多轴时，将显示Y辅助轴和Y辅助轴选项。
+
+### 4.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”或“Bad”。
+  ![Data Refer][chart-line-01]
+  * 线张力 - 使用直线的图形（angled），使用平滑的图形（smooth）
+  * 线厚度 - 设置线厚度
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 点形状 - 线上每个顶点的点形状
+  * 点大小 - 线的每个顶点的大小
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+  * 填充 - The space where the line is drawn is filled in the figure that displays the data by using the color of the common inner definition.
+  * 对象轴 - 当多轴被选择时，出现对象轴字段，并且对象轴指向该系列信息所引用的轴（轴刻度）。
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 4.3. X 轴
+
+* 数据键 - 要在图表上表示的数据的字段名称。 输入要在X轴中表示的数据字段名称。 显示以下数据时，它将是“DATE”。
+  ![Data Refer][chart-line-01]
+* 标题 - X轴的标题
+* 网格线 - 网格线是否显示纵向网格
+* 显示刻度 - X轴是否显示刻度
+
+### 4.4. Y 轴
+* 标题 - 在Y轴中输入所需的标题
+* 自动计算最小值 - 选择自动计算最小值时，将自动应用最小值和刻度来计算比例
+* 最小 - 当“自动计算最小值”关闭时显示，并且可设定最小刻度。
+* 自动计算最大值 - 选择自动计算最大值时，将自动应用最大值和刻度来计算比例
+* 最大 - 当“自动计算最大值”关闭时显示，并且可设定最大刻度。
+* 刻度大小 - 设置刻度大小
+* 网格线 - 是否显示横向网格线
+* 显示刻度 -Y轴是否显示刻度
+
+
+[chart-line-01]: ../images/chart-line-01.png
+
+---
+## 5. 雷达图
+
+以雷达形式表示数据的图表。 雷达图数据以多条线的形式表示。
+
+### 5.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+
+### 5.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-radar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 堆叠组 - 同一堆叠组中包含的系列的值被累积并以图形表示。
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 5.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-radar-01]
+
+[chart-radar-01]: ../images/chart-radar-01.png
+
+---
+
+## 6. 极坐标图
+
+以极坐标表示数据的图表。
+
+### 6.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 设置系列中显示值的位置
+
+### 6.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-polar-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 6.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-polar-01]
+
+[chart-polar-01]: ../images/chart-polar-01.png
+
+---
+
+## 7. 饼图
+
+以饼形态表示数据的图表。
+
+### 7.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 可以在四个方向上放置：顶部，底部，左侧和右侧。
+
+### 7.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-pie-01]
+  * Label - 范例标签
+  * Color - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值 - 确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 7.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-pie-01]
+
+[chart-pie-01]: ../images/chart-pie-01.png
+
+---
+
+## 8. 环形图
+
+以环形形状显示数据的图表。
+
+### 8.1. 通用属性
+
+* 主题 - 更改图表的主题。 支持“light”和“dark”
+* 范例 - 显示图表的范例。
+* 位置 - 可以在四个方向上放置：顶部，底部，左侧和右侧。
+
+### 8.2. 系列
+
+* 使用按钮“ +”可以添加多个系列的数据。
+* **共同**
+  * 数据键 - 在系列中引用的原始数据中，要在图表中表示的数据的字段名称，当显示以下数据时，系列的数据键变为“Good”。
+  ![Data Refer][chart-doughnut-01]
+  * 标签 - 范例标签
+  * 颜色 - 指定系列在图表上显示的颜色
+  * 数据前缀 - 显示值时将用作该值作为前缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据前缀：$ =>结果： $100）
+  * 数据后缀 - 显示值时将用作该值作为后缀的字符（鼠标悬停，显示值设置等）（例如：data：100，数据后缀：元 =>结果： 100元）
+  * 显示值-确定是否在屏幕上显示系列的数据值。 选择显示值时，将出现以下项目。
+    * 字体颜色 - 设置系列中显示值的颜色
+    * 大小 - 设置系列中显示值的字体大小
+    * 位置 - 设置系列中显示值的位置
+
+### 8.3. 轴
+  * 数据键 - 要在图表上表示的数据的字段名称。 输入要在轴中表示的数据字段名称。 显示以下数据时，它将是“LINE”。
+  ![Data Refer][chart-doughnut-01]
+
+[chart-doughnut-01]: ../images/chart-doughnut-01.png

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@operato/scene-chartjs",
+  "description": "Things Scene ChartJS Component",
+  "version": "0.0.5",
+  "license": "MIT",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/chartjs"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^3.1.6",
+    "@hatiolab/things-scene": "^2.7.16",
+    "@polymer/iron-icon": "^3.0.1",
+    "@polymer/iron-pages": "^3.0.1",
+    "@polymer/paper-button": "^3.0.1",
+    "@polymer/paper-icon-button": "^3.0.2",
+    "@polymer/paper-tabs": "^3.1.0",
+    "@webcomponents/template": "^1.5.0",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "chart.js": "^2.9.4",
+    "chartjs-plugin-colorschemes": "^0.4.0",
+    "chartjs-plugin-crosshair": "^1.1.6",
+    "chartjs-plugin-datalabels": "^0.7.0",
+    "chartjs-plugin-style": "^0.5.0",
+    "core-js": "^3.16.0",
+    "lit": "^2.0.2",
+    "regenerator-runtime": "^0.13.3"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.2.27",
+    "@things-factory/builder": "^4.0.6",
+    "@things-factory/operato-board": "^4.0.6",
+    "@types/chart.js": "2.9.34",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "d3717e3284d88dc2831fbcf4ddbce827e2cc2940"
+}

package/src/chartjs.ts

@@ -0,0 +1,134 @@
+import './ox-chart'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, HTMLOverlayElement, Properties, error } from '@hatiolab/things-scene'
+
+import { OxChart } from './ox-chart'
+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 {
+  private _isChartChanged = false
+  private _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 as OxChart
+    var data = this.data
+
+    element.width = width
+    element.height = height
+
+    this._setChartConfig(element)
+    element.data = data
+  }
+
+  /* component.property => element.property */
+  setElementProperties(element: OxChart) {
+    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: OxChart) {
+    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: any) => {
+      return {
+        ...dataset,
+        ...shadowOption
+      }
+    })
+
+    element.options = cloneChartConf
+  }
+
+  onchange(after: Properties, before: Properties) {
+    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: any) {
+    this._isDataChanged = true
+  }
+}
+
+Component.register('chartjs', ChartJS)