@easyv/config 1.1.6 → 1.1.7

package/src/axes.js

@@ -1,162 +1,162 @@
-import { gridLine, tickLine, axisLine, unit, font } from '.';
-import { axisLabel, valueAsixLabel } from './label';
-const defaultFont = font();
-const defaultFontAxisY = font({
-  color: 'rgba(230, 247, 255, 1)',
-});
-const defaultCategoryAxis = {
-  on: true,
-  label: {
-    show: true,
-    format: { type: 'date', showType: 'MM月' },
-    appearance: { count: 3, angle: 0, wordBreak: 'keep-all' },
-    translate: { x: 0, y: 0 },
-    font: defaultFontAxisY,
-  },
-  axisLine: { show: true, color: '#BAE7FF', lineWidth: 1 },
-  tickLine: {
-    show: false,
-    color: 'rgba(186,231,255,1)',
-    lineWidth: 1,
-    tickSize: 6,
-  },
-  gridLine: {
-    show: true,
-    strokeDasharray: '3,3',
-    color: 'rgba(230, 247, 255, 0.2)',
-    lineWidth: 1,
-  },
-};
-
-export const categoryAxis = ({
-  on = defaultCategoryAxis.on,
-  label = defaultCategoryAxis.label,
-  axisLine: axisLine_ = defaultCategoryAxis.axisLine,
-  tickLine: tickLine_ = defaultCategoryAxis.tickLine,
-  gridLine: gridLine_ = defaultCategoryAxis.gridLine,
-} = defaultCategoryAxis) => [
-  {
-    name: 'on',
-    displayName: '启用',
-    value: on,
-    type: 'boolean',
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...axisLabel(label),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...axisLine(axisLine_),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...tickLine(tickLine_),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...gridLine(gridLine_),
-  },
-];
-
-const defaultValueAxis = {
-  on: true,
-  label: {
-    show: true,
-    extent: { min: '0', max: '' },
-    auto: false,
-    mode: 'count',
-    count: 3,
-    step: 100,
-    decimal: 0,
-    suffix: '',
-    translate: { x: 6, y: 0 },
-    font: defaultFont,
-  },
-  unit: {
-    show: false,
-    text: '单位',
-    font: defaultFont,
-    translate: { x: 0, y: 0 },
-  },
-  axisLine: { show: true, color: '#BAE7FF', lineWidth: 1 },
-  tickLine: {
-    show: true,
-    color: 'rgba(186,231,255,1)',
-    lineWidth: 1,
-    tickSize: 6,
-  },
-  gridLine: {
-    show: true,
-    strokeDasharray: '3,3',
-    color: 'rgba(230, 247, 255, 0.2)',
-    lineWidth: 1,
-  },
-};
-
-export const valueAxis = ({
-  on = defaultValueAxis.on,
-  label = defaultValueAxis.label,
-  unit: unit_ = defaultValueAxis.unit,
-  axisLine: axisLine_ = defaultValueAxis.axisLine,
-  tickLine: tickLine_ = defaultValueAxis.tickLine,
-  gridLine: gridLine_ = defaultValueAxis.gridLine,
-} = defaultValueAxis) => [
-  {
-    name: 'on',
-    displayName: '启用',
-    value: on,
-    type: 'boolean',
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...valueAsixLabel(label),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...unit(unit_),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...axisLine(axisLine_),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...tickLine(tickLine_),
-  },
-  {
-    rule: [['on', '$eq', true]],
-    ...gridLine(gridLine_),
-  },
-];
-
-export default (
-  { xAxis = defaultCategoryAxis, yAxis = defaultValueAxis, zAxis } = {
-    xAxis: defaultCategoryAxis,
-    yAxis: defaultValueAxis,
-  }
-) => ({
-  name: 'axes',
-  displayName: '坐标轴',
-  value: [
-    {
-      name: 'xAxis',
-      displayName: 'X轴',
-      value: categoryAxis(xAxis),
-    },
-    {
-      name: 'yAxis',
-      displayName: 'Y轴',
-      value: valueAxis(yAxis),
-    },
-    zAxis && {
-      name: 'zAxis',
-      displayName: 'Z轴',
-      value: valueAxis(zAxis),
-    },
-  ].filter((item) => !!item),
-  config: {
-    layout: 'horizontal',
-  },
-  type: 'menu',
-});
+import { gridLine, tickLine, axisLine, unit, font } from '.';
+import { axisLabel, valueAsixLabel } from './label';
+const defaultFont = font();
+const defaultFontAxisY = font({
+  color: 'rgba(230, 247, 255, 1)',
+});
+const defaultCategoryAxis = {
+  on: true,
+  label: {
+    show: true,
+    format: { type: 'date', showType: 'MM月' },
+    appearance: { count: 3, angle: 0, wordBreak: 'keep-all' },
+    translate: { x: 0, y: 0 },
+    font: defaultFontAxisY,
+  },
+  axisLine: { show: true, color: '#BAE7FF', lineWidth: 1 },
+  tickLine: {
+    show: false,
+    color: 'rgba(186,231,255,1)',
+    lineWidth: 1,
+    tickSize: 6,
+  },
+  gridLine: {
+    show: true,
+    strokeDasharray: '3,3',
+    color: 'rgba(230, 247, 255, 0.2)',
+    lineWidth: 1,
+  },
+};
+
+export const categoryAxis = ({
+  on = defaultCategoryAxis.on,
+  label = defaultCategoryAxis.label,
+  axisLine: axisLine_ = defaultCategoryAxis.axisLine,
+  tickLine: tickLine_ = defaultCategoryAxis.tickLine,
+  gridLine: gridLine_ = defaultCategoryAxis.gridLine,
+} = defaultCategoryAxis) => [
+  {
+    name: 'on',
+    displayName: '启用',
+    value: on,
+    type: 'boolean',
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...axisLabel(label),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...axisLine(axisLine_),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...tickLine(tickLine_),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...gridLine(gridLine_),
+  },
+];
+
+const defaultValueAxis = {
+  on: true,
+  label: {
+    show: true,
+    extent: { min: '0', max: '' },
+    auto: false,
+    mode: 'count',
+    count: 3,
+    step: 100,
+    decimal: 0,
+    suffix: '',
+    translate: { x: 6, y: 0 },
+    font: defaultFont,
+  },
+  unit: {
+    show: false,
+    text: '单位',
+    font: defaultFont,
+    translate: { x: 0, y: 0 },
+  },
+  axisLine: { show: true, color: '#BAE7FF', lineWidth: 1 },
+  tickLine: {
+    show: true,
+    color: 'rgba(186,231,255,1)',
+    lineWidth: 1,
+    tickSize: 6,
+  },
+  gridLine: {
+    show: true,
+    strokeDasharray: '3,3',
+    color: 'rgba(230, 247, 255, 0.2)',
+    lineWidth: 1,
+  },
+};
+
+export const valueAxis = ({
+  on = defaultValueAxis.on,
+  label = defaultValueAxis.label,
+  unit: unit_ = defaultValueAxis.unit,
+  axisLine: axisLine_ = defaultValueAxis.axisLine,
+  tickLine: tickLine_ = defaultValueAxis.tickLine,
+  gridLine: gridLine_ = defaultValueAxis.gridLine,
+} = defaultValueAxis) => [
+  {
+    name: 'on',
+    displayName: '启用',
+    value: on,
+    type: 'boolean',
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...valueAsixLabel(label),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...unit(unit_),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...axisLine(axisLine_),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...tickLine(tickLine_),
+  },
+  {
+    rule: [['on', '$eq', true]],
+    ...gridLine(gridLine_),
+  },
+];
+
+export default (
+  { xAxis = defaultCategoryAxis, yAxis = defaultValueAxis, zAxis } = {
+    xAxis: defaultCategoryAxis,
+    yAxis: defaultValueAxis,
+  }
+) => ({
+  name: 'axes',
+  displayName: '坐标轴',
+  value: [
+    {
+      name: 'xAxis',
+      displayName: 'X轴',
+      value: categoryAxis(xAxis),
+    },
+    {
+      name: 'yAxis',
+      displayName: 'Y轴',
+      value: valueAxis(yAxis),
+    },
+    zAxis && {
+      name: 'zAxis',
+      displayName: 'Z轴',
+      value: valueAxis(zAxis),
+    },
+  ].filter((item) => !!item),
+  config: {
+    layout: 'horizontal',
+  },
+  type: 'menu',
+});

package/src/axisLine.js

@@ -1,39 +1,39 @@
-const axisLine = {
-  show: true,
-  color: '#BAE7FF',
-  lineWidth: 1,
-};
-export default ({
-  show = axisLine.show,
-  color = axisLine.color,
-  lineWidth = axisLine.lineWidth,
-} = axisLine) => ({
-  name: 'axisLine',
-  displayName: '轴线',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'color',
-      displayName: '颜色',
-      value: color,
-      type: 'color',
-      markColorType: 'assistColor',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'lineWidth',
-      displayName: '粗细',
-      value: lineWidth,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-  ],
-});
+const axisLine = {
+  show: true,
+  color: '#BAE7FF',
+  lineWidth: 1,
+};
+export default ({
+  show = axisLine.show,
+  color = axisLine.color,
+  lineWidth = axisLine.lineWidth,
+} = axisLine) => ({
+  name: 'axisLine',
+  displayName: '轴线',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'color',
+      displayName: '颜色',
+      value: color,
+      type: 'color',
+      markColorType: 'assistColor',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'lineWidth',
+      displayName: '粗细',
+      value: lineWidth,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+  ],
+});

package/src/baseLine.js

@@ -0,0 +1,177 @@
+//@ts-check
+import { font, translate } from '.';
+
+const defaultBaseLine = {
+  line: {
+    yOrZ: 'y',
+    margin: {
+      marginLeft: 25,
+      marginRight: 25
+    },
+    lineType: 'solid',
+    color: '#BAE7FF',
+    lineWidth: 1,
+    strokeDasharray: '3,3'
+  },
+  dataStyle: {
+    font: font(),
+    translate: { x: 0, y: 0 },
+    suffix: {
+      show: false,
+      font: font(),
+      translate: { x: 0, y: 0 },
+    }
+  }
+};
+export default ({
+  line: {
+    yOrZ = defaultBaseLine.line.yOrZ,
+    margin: {
+      marginLeft = defaultBaseLine.line.margin.marginLeft,
+      marginRight = defaultBaseLine.line.margin.marginRight,
+    } = defaultBaseLine.line.margin,
+    lineType = defaultBaseLine.line.lineType,
+    color = defaultBaseLine.line.color,
+    lineWidth = defaultBaseLine.line.lineWidth,
+    strokeDasharray = defaultBaseLine.line.strokeDasharray
+  } = defaultBaseLine.line,
+  dataStyle: {
+    textStyle = defaultBaseLine.dataStyle.font,
+    translate: { x, y } = defaultBaseLine.dataStyle.translate,
+    suffix: {
+      show = defaultBaseLine.dataStyle.suffix.show,
+      suffixStyle = defaultBaseLine.dataStyle.suffix.suffixStyle,
+      suffixTranslate: {
+        x: suffixTranslateX = defaultBaseLine.dataStyle.suffix.translate.x,
+        y: suffixTranslateY = defaultBaseLine.dataStyle.suffix.translate.y
+      } = defaultBaseLine.dataStyle.suffix.translate
+    } = defaultBaseLine.dataStyle.suffix,
+  } = defaultBaseLine.dataStyle
+
+} = defaultBaseLine) => [
+    {
+      name: 'line',
+      displayName: '线样式',
+      config: {
+        layout: 'horizontal'
+      },
+      value: [
+        {
+          name: 'yOrZ',
+          displayName: '纵轴选择',
+          value: yOrZ,
+          type: 'select',
+          config: {
+            options: [
+              { name: 'Y轴', value: 'y' },
+              { name: 'Z轴', value: 'z' },
+            ],
+          },
+        },
+        {
+          name: 'margin',
+          displayName: '边距',
+          type: 'group',
+          value: [
+            {
+              type: 'number',
+              name: 'marginLeft',
+              displayName: '左',
+              value: marginLeft,
+              config: {
+                span: 12,
+                showStep: false,
+              },
+            },
+            {
+              type: 'number',
+              name: 'marginRight',
+              displayName: '右',
+              value: marginRight,
+              config: {
+                span: 12,
+                showStep: false,
+              },
+            }
+          ]
+        },
+        {
+          name: 'lineType',
+          displayName: '线样式',
+          value: lineType,
+          type: 'select',
+          config: {
+            options: [{
+              name: '实线',
+              value: 'solid'
+            }, {
+              name: '虚线',
+              value: 'dash'
+            }]
+          },
+        },
+        {
+          name: 'color',
+          displayName: '颜色',
+          value: color,
+          type: 'color',
+          markColorType: 'assistColor',
+        },
+        {
+          name: 'lineWidth',
+          displayName: '粗细',
+          value: lineWidth,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          rule: [['lineType', '$eq', 'dash']],
+          name: 'strokeDasharray',
+          displayName: '虚线样式',
+          value: strokeDasharray,
+          type: 'input',
+          tip: '格式使用半角字符，如3,3',
+        },
+      ],
+    },
+    {
+      name: 'dataStyle',
+      displayName: '数据样式',
+      value: [
+        {
+          name: 'textStyle',
+          displayName: '文本样式',
+          value: font(textStyle),
+          type: 'textStyle',
+          markColorType: 'textColor',
+        },
+        translate(x, y),
+        {
+          name: 'suffix',
+          displayName: '后缀',
+          value: [
+            {
+              name: 'show',
+              displayName: '显示',
+              value: show,
+              type: 'boolean',
+            },
+            {
+              rule: [['show', '$eq', true]],
+              name: 'suffixStyle',
+              displayName: '文本样式',
+              value: font(suffixStyle),
+              type: 'textStyle',
+              markColorType: 'textColor',
+            },
+            {
+              rule: [['show', '$eq', true]],
+              ...translate(suffixTranslateX, suffixTranslateY)
+            }
+          ]
+        }
+      ]
+    }
+  ];