dtable-statistic 4.0.2-test-2

package/README.md

@@ -0,0 +1,3 @@
+# dtable-statistic
+
+注：本地开发所需的 settings 可以参考 dtable 项目中的配置。

package/es/api/dtable-db-api.js

@@ -0,0 +1,43 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import axios from 'axios';
+var DTableDbAPI = /*#__PURE__*/function () {
+  function DTableDbAPI() {
+    _classCallCheck(this, DTableDbAPI);
+    this.req = null;
+  }
+  _createClass(DTableDbAPI, [{
+    key: "init",
+    value: function init() {
+      if (this.req) return;
+      var _window$dtable = window.dtable,
+        accessToken = _window$dtable.accessToken,
+        dtableDb = _window$dtable.dtableDb;
+      this.req = axios.create({
+        baseURL: dtableDb,
+        headers: {
+          'Authorization': 'Token ' + accessToken
+        }
+      });
+    }
+  }, {
+    key: "sqlQuery",
+    value: function sqlQuery(sql, parameters) {
+      var convert_keys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.init();
+      var dtableUuid = window.dtable.dtableUuid;
+      var url = 'api/v1/query/' + dtableUuid;
+      var data = {
+        sql: sql,
+        convert_keys: convert_keys
+      };
+      if (parameters) {
+        data['parameters'] = parameters;
+      }
+      return this.req.post(url, data);
+    }
+  }]);
+  return DTableDbAPI;
+}();
+var dtableDbAPI = new DTableDbAPI();
+export default dtableDbAPI;

package/es/assets/css/color-picker.css

@@ -0,0 +1,53 @@
+/* color-picker */
+.statistic-chart-color-picker-container {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  background-clip: padding-box;
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.statistic-chart-color-picker-container .picker-control {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control {
+    width: 24px;
+    height: 24px;
+    margin-left: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+.statistic-chart-color-picker-container .picker-control.readOnly,
+.statistic-chart-color-picker-container .picker-control.readOnly .text-control {
+  background-color: #f7f7f7;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control {
+  cursor: default;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control.white-color {
+  border: 3px #eee solid;
+}
+
+.statistic-chart-color-picker-container .picker-control .text-control {
+  height: 100%;
+  border: none;
+  outline: none;
+  padding-left: 10px;
+  font-size: 14px;
+}
+
+.statistic-chart-color-picker-container .picker-control.readOnly .text-control {
+  cursor: default;
+}

package/es/assets/css/color-rules-popover.css

@@ -0,0 +1,144 @@
+.statistic-color-rules-popover .popover {
+  max-width: unset;
+  min-width: 200px;
+  background-color: #fff;
+}
+
+.statistic-color-rules-wrapper {
+  max-width: unset;
+  min-width: 420px;
+  min-height: 60px;
+  padding-top: 1rem;
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+.statistic-color-rules-wrapper .no-color-rules {
+  padding: 0 1rem 1rem;
+  font-size: 14px;
+  color: #999;
+}
+
+.statistic-color-rules-popover .statistic-btn-add-color-rule {
+  border-top: unset;
+  color: #555;
+}
+
+.statistic-color-rules-popover .statistic-btn-add-color-rule:hover {
+  cursor: pointer;
+  background-color: #f9f9f9;
+}
+
+.statistic-color-rules-popover .statistic-btn-add-color-rule.disabled:hover {
+  cursor: default;
+}
+
+.statistic-color-rule-item {
+  padding: 8px 0;
+  min-height: 30px;
+  position: relative;
+}
+
+.statistic-color-rule-item:hover {
+  cursor: pointer;
+  background-color: #f9f9f9;
+}
+
+.statistic-color-rule-item.editing {
+  background-color: #f5f5f5;
+  padding-bottom: 2px;
+}
+
+.statistic-color-rule-item.editing:hover {
+  background-color: #f5f5f5;
+}
+
+.statistic-color-rule-title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 0 10px;
+}
+
+.statistic-color-rule-dropdown {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  border-radius: 3px;
+  text-align: center;
+  margin: 0 8px;
+  cursor: pointer;
+  position: relative;
+}
+
+.statistic-color-rule-dropdown .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(.8);
+}
+
+.statistic-color-rule-name {
+  max-width: 344px;
+}
+
+.statistic-color-rule-name,
+.statistic-color-rule-filters .add-new-option,
+.statistic-color-rules .add-row-color-rule .add-new-option {
+  user-select: none;
+}
+
+.statistic-color-rule-name.invalid,
+.statistic-color-rules-popover .statistic-btn-add-color-rule.disabled {
+  opacity: .5;
+}
+
+.statistic-color-rules-popover .statistic-btn-add-color-rule.disabled {
+  cursor: default;
+}
+
+.statistic-delete-color-rule {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  visibility: hidden;
+}
+
+.statistic-color-rule-item:hover .statistic-delete-color-rule {
+  visibility: visible;
+}
+
+.statistic-delete-color-rule .dtable-font {
+  color: #999;
+}
+
+.statistic-delete-color-rule:hover .dtable-font,
+.statistic-btn-add-color-rule-filter:hover .popover-add-icon,
+.statistic-btn-add-color-rule-filter:hover .add-new-option {
+  color: #5a5a5a;
+}
+
+.statistic-btn-add-color-rule-filter.disabled:hover .popover-add-icon,
+.statistic-btn-add-color-rule-filter.disabled:hover .add-new-option {
+  color: #999;
+}
+
+.add-item-btn.statistic-btn-add-color-rule-filter {
+  border-top: unset;
+  background-color: #f5f5f5;
+  padding-left: 27px;
+  padding-right: 12px;
+  height: 30px;
+  line-height: 30px;
+  font-weight: 400;
+}
+
+.statistic-btn-add-color-rule-filter:hover {
+  background-color: unset;
+}
+
+.statistic-btn-add-color-rule-filter .popover-add-icon,
+.statistic-btn-add-color-rule-filter .add-new-option {
+  color: #999;
+}

package/es/assets/css/color-theme-dialog.css

@@ -0,0 +1,40 @@
+.color-theme-setting-dialog {
+  width: 550px;
+  max-width: 550px;
+  height: 500px;
+}
+
+.color-theme-setting-dialog .color-theme-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.color-theme-container .color-theme-item {
+  height: 38px;
+  width: 240px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.color-theme-container .color-theme-item.active {
+  border: 2px solid #37BA46;
+}
+
+.color-theme-container .color-theme-item .color-block:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.color-theme-container .color-theme-item .color-block:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.color-theme-container .color-theme-item .statistic-color-block {
+  flex: 1 1;
+  height: 34px;
+}