bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/basic-line-chart/basic-line-chart.component.ts

@@ -1,654 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
-import { Data, Property, Widget, Drill, DataOutput } from 'bbj-widget-base';
-import { getEchartsTextStyle } from '../shared/util/echarts.util';
-
-@Component({
-  selector: 'sc-basicLine',
-  templateUrl: './basic-line-chart.component.html',
-  styleUrls: ['./basic-line-chart.component.less'],
-})
-@Widget('基本折线图', {
-  group: 'lineChart',
-  image: 'assets/img/screen/basic-line-chart.png',
-  icon: 'icontubiao',
-})
-export class BasicLineChartComponent implements OnInit, OnChanges {
-  @Property('类型', { ui: { hidden: true } })
-  type = 'basic';
-  @Property('图表样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['lineColor'],
-      example: [
-        {
-          background: 'assets/img/screen/line2.png',
-          data: { lineColor: ['#FF851D', '#FFEF66'] },
-        },
-        {
-          background: 'assets/img/screen/line3.png',
-          data: { lineColor: ['#00D191', '#00FECB'] },
-        },
-        {
-          background: 'assets/img/screen/line1.png',
-          data: { lineColor: ['#3285FF', '#00D2FD'] },
-        },
-        {
-          background: 'assets/img/screen/line4.png',
-          data: { lineColor: ['#8934F8', '#FF3699'] },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('系列颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  lineColor = ['#3285FF', '#00D2FD'];
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#595F7A',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 12,
-  };
-  @Property('边距', { ui: { widget: 'myGrid' } })
-  grid: any = {
-    top: 30,
-    right: 30,
-    bottom: 40,
-    left: 36,
-  };
-  @Property('图例', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '无', value: 'none' },
-      { label: '自动', value: 'auto' },
-      { label: '居中', value: 'center' },
-      { label: '左对齐', value: 'left' },
-      { label: '右对齐', value: 'right' },
-    ],
-  })
-  align = 'center';
-  @Property('提示线样式', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '直线指示器', value: 'line' },
-      { label: '阴影指示器', value: 'shadow' },
-      { label: '十字准星指示器', value: 'cross' },
-      { label: '无', value: 'none' },
-    ],
-  })
-  axisType = 'none';
-  @Property('提示线类型', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '实线', value: 'solid' },
-      { label: '虚线', value: 'dashed' },
-      { label: '点线', value: 'dotted' },
-    ],
-  })
-  lineType = 'dashed';
-  // @Property('轴单位', {ui: {widget: 'myUnit'}})
-  // unit = {x: '', y: ''};
-  @Property('提示线颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  axisColor = '#333333';
-  @Property('提示线宽度', { type: 'number' })
-  axisWidth = 10;
-  @Property('x轴类型', {
-    enum: [
-      { label: '类目', value: 'category' },
-      { label: '时间', value: 'time' },
-    ],
-  })
-  xType = 'category';
-  @Property('y轴单位', { type: 'string' })
-  yUnit = '';
-  @Property('x轴单位', { type: 'string' })
-  xUnit = '';
-  @Property('y轴最小')
-  yMin: number;
-  @Property('y轴最大')
-  yMax: number;
-  @Property('y轴最小间隔')
-  yMinInterval: number;
-  @Property('y轴最大增减')
-  yMaxAddNum: number;
-  @Property('坐标留白', { type: 'boolean' })
-  boundaryGap = true;
-  @Property('显示Y轴', { type: 'boolean' })
-  showY = true;
-  @Property('y轴网络线', { type: 'boolean' })
-  netLine = false;
-
-  @Property('y网络线类型', {
-    ui: { widget: 'select', visibleIf: { netLine: [true] } },
-    enum: [
-      { label: '实线', value: 'solid' },
-      { label: '虚线', value: 'dashed' },
-      { label: '点线', value: 'dotted' },
-    ],
-  })
-  netLineType = 'dashed';
-  @Property('x轴网络线', { type: 'boolean' })
-  netLineX = false;
-
-  @Property('x网络线类型', {
-    ui: { widget: 'select', visibleIf: { netLineX: [true] } },
-    enum: [
-      { label: '实线', value: 'solid' },
-      { label: '虚线', value: 'dashed' },
-      { label: '点线', value: 'dotted' },
-    ],
-  })
-  netLineXType = 'dashed';
-
-  @Property('网络线颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  netLineColor = 'rgba(255,255,255,0.2)';
-
-  @Property('标签', { type: 'boolean' })
-  label = false;
-
-  @Property('标线', { type: 'boolean' })
-  markLine = false;
-  @Property('Y轴标线高度', { type: 'number', ui: { visibleIf: { markLine: [true] } } })
-  YmarkLineHeight = 10;
-
-  // @Property('显示X轴', {
-  //   ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  // })
-  // showX = true;
-  @Property('Y标线标题', {
-    type: 'string',
-    ui: { visibleIf: { markLine: [true] }, optionalHelp: '此标题需要跟x字段内名字一致' },
-  })
-  YmarkLineName = '';
-  // @Property('标线数值', { type: 'number' })
-  // markLineVal = null;
-
-  @Property('Y标线类型', {
-    ui: { widget: 'select', visibleIf: { markLine: [true] } },
-    enum: [
-      { label: '实线', value: 'solid' },
-      { label: '虚线', value: 'dashed' },
-      { label: '点线', value: 'dotted' },
-    ],
-  })
-  YmarkLineType = 'dashed';
-
-  @Property('Y标线颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-      visibleIf: { markLine: [true] },
-    },
-  })
-  YmarkLineColor = '#f00';
-  @Property('Y标线粗细', {
-    type: 'number',
-    ui: { visibleIf: { markLine: [true] } },
-  })
-  YmarkWidth = 2;
-  @Property('X轴标线位置', { type: 'string', ui: { visibleIf: { markLine: [true] } } })
-  XmarkLineLocation = '二月';
-  @Property('X标线标题', {
-    type: 'string',
-    ui: { optionalHelp: '此标题需要跟x字段内名字一致', visibleIf: { markLine: [true] } },
-  })
-  XmarkLineName = '';
-  @Property('X标线类型', {
-    ui: { widget: 'select', visibleIf: { markLine: [true] } },
-    enum: [
-      { label: '实线', value: 'solid' },
-      { label: '虚线', value: 'dashed' },
-      { label: '点线', value: 'dotted' },
-    ],
-  })
-  XmarkLineType = 'dashed';
-
-  @Property('X标线颜色', {
-    ui: {
-      visibleIf: { markLine: [true] },
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  XmarkLineColor = '#f00';
-  @Property('X标线粗细', {
-    type: 'number',
-    ui: { visibleIf: { markLine: [true] } },
-  })
-  XmarkWidth = 2;
-  @Property('数据标线')
-  showDataMarkLine: boolean;
-  @Property('数据标线格式化', {
-    ui: { visibleIf: { showDataMarkLine: [true] }, optionalHelp: 'function(params){return params.data.value}' },
-  })
-  dataMarkLineFormatter: string;
-  @Property('隐藏x轴标签')
-  hideXLabel: boolean;
-  @Property('x轴标签角度', {
-    ui: { widget: 'myRange', min: -90, max: 90, step: 10, visibleIf: { hideXLabel: (value) => !value } },
-  })
-  xLabelRotate = 0;
-  @Property('x轴文本宽度', { ui: { visibleIf: { hideXLabel: (value) => !value } } })
-  xLabelWidth: number;
-  @Property('x轴文字宽度超出', {
-    enum: [
-      { label: '自动', value: 'auto' },
-      { label: '截断', value: 'truncate' },
-      { label: '换行', value: 'break' },
-      { label: '强制换行', value: 'breakAll' },
-    ],
-    ui: { widget: 'select', visibleIf: { hideXLabel: (value) => !value } },
-  })
-  xLabelOverflow = 'auto';
-  @Property('标签显示间隔', {
-    ui: {
-      visibleIf: { hideXLabel: (value) => !value },
-      optionalHelp: {
-        text: `默认会采用标签不重叠的策略间隔显示标签。
-可以设置成 0 强制显示所有标签。 
-如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。`,
-        overlayStyle: {
-          whiteSpace: 'pre-line',
-        },
-      },
-    },
-  })
-  xLabelInterval: number;
-
-  @Property('区域缩放')
-  insideDataZoom: boolean;
-  @Property('缩放最少数量', { ui: { visibleIf: { insideDataZoom: [true] } } })
-  dataZoomMinData: number;
-  @Property('缩放开始百分比', { ui: { visibleIf: { insideDataZoom: [true] } } })
-  dataZoomStart: number;
-  @Property('缩放结束百分比', { ui: { visibleIf: { insideDataZoom: [true] } } })
-  dataZoomEnd: number;
-  @Property('滚轮缩放', {
-    enum: [
-      { label: '启用', value: true },
-      { label: '禁用', value: false },
-      { label: '按住shift', value: 'shift' },
-      { label: '按住ctrl', value: 'ctrl' },
-      { label: '按住alt', value: 'alt' },
-    ],
-    ui: { widget: 'select', visibleIf: { insideDataZoom: [true] } },
-  })
-  zoomOnMouseWheel = true;
-  @Property('滑动条', { ui: { visibleIf: { insideDataZoom: [true] } } })
-  sliderDataZoom: boolean;
-  @Property('锁定区域大小', { ui: { visibleIf: { sliderDataZoom: [true] } } })
-  zoomLock: boolean;
-  @Property('提示框字体', { ui: { widget: 'myFont' } })
-  tooltipFont: any;
-  @Property('阶梯拐点', {
-    enum: [
-      { label: '当前点', value: 'start' },
-      { label: '中间点', value: 'middle' },
-      { label: '下个点', value: 'end' },
-    ],
-    ui: { widget: 'select', visibleIf: { type: ['step'] } },
-  })
-  step: string;
-  @Property('标记点大小', { type: 'number' })
-  symbolSize: number;
-  chartOption: any = null;
-  @Data({
-    properties: {
-      x: { type: 'string', title: '类目' },
-      y: { type: 'number', title: '值' },
-      s: { type: 'string', title: '系列' },
-    },
-  })
-  _data: any[] = [
-    { x: '一月', y: 10, s: '收入' },
-    { x: '二月', y: 20, s: '收入' },
-    { x: '三月', y: 25, s: '收入' },
-    { x: '四月', y: 35, s: '收入' },
-    { x: '五月', y: 27, s: '收入' },
-    { x: '六月', y: 28, s: '收入' },
-    { x: '一月', y: 18, s: '支出' },
-    { x: '二月', y: 28, s: '支出' },
-    { x: '三月', y: 32, s: '支出' },
-    { x: '四月', y: 48, s: '支出' },
-    { x: '五月', y: 20, s: '支出' },
-    { x: '六月', y: 17, s: '支出' },
-  ];
-  @Drill()
-  @DataOutput(['x', 's'])
-  dataClick = new EventEmitter<any>();
-  xData = [];
-  yData = [];
-  // series = [];
-  style = {
-    color: '',
-    fontFamily: '',
-    fontWeight: '',
-    fontSize: '',
-    lineHeight: '',
-  };
-  constructor() {}
-
-  ngOnInit() {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      const textStyle = this.getTextStyle(this.font);
-      this.style = textStyle;
-      this.chartOption = {
-        dataZoom: this.getDataZoom(),
-        tooltip: this.getTooltip(),
-        legend: this.getLegend(),
-        grid: this.getGrid(),
-        xAxis: this.getXAxis(),
-        yAxis: this.getYAxis(),
-        color: this.lineColor,
-        series: [],
-      };
-      this.reloadData();
-    }
-  }
-
-  getXAxis(): any {
-    return {
-      name: this.xUnit,
-      nameTextStyle: this.style,
-      type: this.xType || 'category',
-      boundaryGap: this.boundaryGap,
-      axisLine: {
-        lineStyle: {
-          color: this.style.color,
-        },
-      },
-      axisLabel: {
-        ...this.style,
-        rotate: this.xLabelRotate,
-        show: !this.hideXLabel,
-        width: this.xLabelWidth,
-        overflow: this.xLabelOverflow,
-        interval: this.xLabelInterval,
-      },
-      splitLine: {
-        show: this.netLineX,
-        lineStyle: {
-          type: this.netLineXType,
-          color: this.netLineColor,
-        },
-      },
-    };
-  }
-
-  getYAxis(): any {
-    return {
-      show: true,
-      name: this.yUnit,
-      nameTextStyle: this.style,
-      type: 'value',
-      min: this.yMin,
-      max: (value) => {
-        let yMax = value.max;
-        if (this.yMax) {
-          yMax = Number(this.yMax);
-        } else if (this.markLine) {
-          yMax = Math.max(Number(this.YmarkLineHeight), yMax);
-        }
-        return Math.ceil(this.yMaxAddNum ? yMax + Number(this.yMaxAddNum) : yMax);
-      },
-      axisLine: {
-        show: this.showY,
-        lineStyle: {
-          color: this.style.color,
-        },
-      },
-      axisLabel: this.style,
-      splitLine: {
-        show: this.netLine,
-        lineStyle: {
-          type: this.netLineXType,
-          color: this.netLineColor,
-        },
-      },
-      axisTick: {
-        show: this.showY,
-      },
-      minInterval: this.yMinInterval,
-    };
-  }
-
-  getGrid() {
-    return {
-      top: this.grid.top,
-      right: this.grid.right,
-      left: this.grid.left,
-      bottom: this.grid.bottom,
-    };
-  }
-  getLegend(): any {
-    return {
-      align: 'left',
-      left: this.align,
-      show: this.align !== 'none',
-      icon: 'rect',
-      textStyle: this.style,
-    };
-  }
-  getTooltip() {
-    return {
-      trigger: 'axis',
-      textStyle: this.getTextStyle(this.tooltipFont),
-      axisPointer: {
-        type: this.axisType,
-        label: {
-          show: false,
-        },
-        lineStyle: {
-          type: this.lineType,
-          color: this.axisColor,
-          width: this.axisWidth,
-        },
-      },
-    };
-  }
-
-  getTextStyle(font: any) {
-    return getEchartsTextStyle(font);
-  }
-
-  getDataZoom() {
-    const dataZoom = [];
-    if (this.insideDataZoom) {
-      let enableDataZoom = true;
-      if (this.dataZoomMinData != null) {
-        const xSet = new Set<string>();
-        this._data.forEach((data) => {
-          if (data.x) {
-            xSet.add(data.x);
-          }
-        });
-        if (xSet.size < this.dataZoomMinData) {
-          enableDataZoom = false;
-        }
-      }
-      if (enableDataZoom) {
-        let start = this.dataZoomStart || 0;
-        let end = this.dataZoomEnd || 100;
-        dataZoom.push({ type: 'inside', start, end, zoomOnMouseWheel: this.zoomOnMouseWheel });
-        if (this.sliderDataZoom) {
-          dataZoom.push({ type: 'slider', start, end, zoomLock: this.zoomLock, brushSelect: false });
-        }
-      }
-    }
-    return dataZoom;
-  }
-
-  reloadData() {
-    const seriesMap = {};
-    const dataset = [];
-    const source = [];
-    dataset.push({ source });
-    this._data.forEach((record) => {
-      // 针对markline标线关联数据库的操作， 若x的名字与markline的name一致，则获取对应的y轴数据作为markline的value; 目前仅支持一个markline
-      // data中过滤掉markline的数据
-      if (this.markLine && this.YmarkLineName && record.x === this.YmarkLineName) {
-        this.YmarkLineHeight = record.y;
-      } else {
-        //为空filter会报错
-        if (record.s == null) {
-          record = { ...record, s: '' };
-        }
-        source.push(record);
-        const s = record.s;
-        let series = seriesMap[s];
-        if (!series) {
-          // seriesSet.add(s);
-          const transform = {
-            type: 'filter',
-            config: { dimension: 's', value: s },
-          };
-          dataset.push({ transform });
-          series = this.setSeriesStyle(s, dataset.length - 1);
-          seriesMap[s] = series;
-          if (this.showDataMarkLine) {
-            series.markLine = {
-              symbol: ['none', 'none'],
-              label: {
-                ...this.style,
-                position: 'start',
-              },
-              data: [],
-            };
-            if (this.dataMarkLineFormatter) {
-              series.markLine.label.formatter = eval('(' + this.dataMarkLineFormatter + ')');
-            }
-          }
-        }
-        if (this.showDataMarkLine) {
-          series.markLine.data.push({ xAxis: record.x });
-        }
-      }
-    });
-    this.chartOption.dataset = dataset;
-    if (this.markLine) {
-      const marklineStyle: any = {
-        symbol: 'none',
-        silent: true, // 鼠标悬停书剑，true没有
-        data: [],
-      };
-      if (this.YmarkLineName) {
-        marklineStyle.data.push({
-          name: this.YmarkLineName,
-          type: this.YmarkLineHeight ? null : 'average',
-          yAxis: this.YmarkLineHeight,
-          lineStyle: {
-            color: this.YmarkLineColor,
-            type: this.YmarkLineType,
-            width: this.YmarkWidth ? this.YmarkWidth : 2,
-          },
-          label: {
-            formatter: '{b}{c}',
-            position: 'insideEndTop',
-            color: this.YmarkLineColor,
-            fontSize: this.font.size,
-          },
-        });
-      }
-      if (this.XmarkLineName) {
-        marklineStyle.data.push({
-          name: this.XmarkLineName,
-          type: this.XmarkLineLocation ? null : 'average',
-          xAxis: this.XmarkLineLocation,
-          lineStyle: {
-            color: this.XmarkLineColor,
-            type: this.XmarkLineType,
-            width: this.XmarkWidth ? this.XmarkWidth : 2,
-          },
-          label: {
-            formatter: '{b}{c}',
-            position: 'insideEndTop',
-            color: this.XmarkLineColor,
-            fontSize: this.font.size,
-          },
-        });
-      }
-      this.chartOption.series.push({ type: 'line', markLine: marklineStyle, data: [] });
-      // this.chartOption.series[this.chartOption.series.length - 1].markLine = marklineStyle;
-    }
-  }
-
-  setSeriesStyle(name: string, datasetIndex: number) {
-    const series: any = {
-      name,
-      label: {
-        show: this.label,
-        textStyle: this.style,
-      },
-      connectNulls: true,
-      itemStyle: {},
-      type: 'line',
-      areaStyle: {},
-      smooth: false,
-      symbolSize: this.symbolSize ?? 10,
-      encode: { x: 'x', y: 'y' },
-      datasetIndex,
-    };
-    this.chartOption.series.push(series);
-    series.areaStyle.opacity = 0;
-    if (this.type === 'smooth' || this.type === 'smooth-area') {
-      series.smooth = true;
-    }
-    if (this.type === 'area' || this.type === 'smooth-area') {
-      series.areaStyle.opacity = 0.5;
-      series.symbolSize = this.symbolSize ?? (this.label ? 10 : 0);
-    }
-    if (this.type === 'step') {
-      series.step = this.step;
-    }
-    return series;
-  }
-
-  uniqueData(data) {
-    for (let i = 0; i < data.length - 1; i++) {
-      for (let j = i + 1; j < data.length; j++) {
-        if (data[i] === data[j]) {
-          data.splice(j, 1);
-          j--;
-        }
-      }
-    }
-    return data;
-  }
-
-  getMaxY() {
-    for (let i = 0; i < this._data.length; i++) {
-      this.yData[i] = this._data[i].y;
-    }
-    this.uniqueData(this.yData);
-    const a = Math.max(...this.yData).toFixed(0);
-    const b = a.toString().length;
-    const c = Math.pow(10, b - 1);
-    const max = Number(c) + Number(a);
-    return max;
-  }
-
-  onChartClick(event) {
-    this.dataClick.emit({ x: event.name, s: event.seriesName });
-  }
-}

package/src/lib/basic-line-chart/basic-line-chart.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BasicLineChartComponent } from './basic-line-chart.component';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-
-@NgModule({
-  declarations: [BasicLineChartComponent],
-  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule],
-})
-export class BasicLineChartModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(BasicLineChartComponent);
-  }
-}

package/src/lib/basic-pie-chart/basic-pie-chart.component.html

@@ -1,7 +0,0 @@
-<div
-  echarts
-  [options]="chartOption"
-  class="demo-chart"
-  (chartClick)="onChartClick($event)"
-  [initOpts]="{ renderer: 'svg' }"
-></div>

package/src/lib/basic-pie-chart/basic-pie-chart.component.less

@@ -1,8 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-.demo-chart {
-  height: 100%;
-}

package/src/lib/basic-pie-chart/basic-pie-chart.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { BasicPieChartComponent } from './basic-pie-chart.component';
-
-describe('BasicPieChartComponent', () => {
-  let component: BasicPieChartComponent;
-  let fixture: ComponentFixture<BasicPieChartComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BasicPieChartComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BasicPieChartComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});