bbj-screen-widget 2.4.62 → 2.4.63

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

@@ -1,493 +0,0 @@
-import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
-import { Property, Widget, Data, Drill, DataOutput } from 'bbj-widget-base';
-import { BasicLineChartComponent } from '../basic-line-chart/basic-line-chart.component';
-
-@Component({
-  selector: 'sc-basic-bar-chart',
-  templateUrl: './basic-bar-chart.component.html',
-  styleUrls: ['./basic-bar-chart.component.less'],
-})
-@Widget('基本柱状图', {
-  group: 'barChart',
-  image: 'assets/img/screen/baseBar.png',
-  icon: 'icontubiao',
-})
-export class BasicBarChartComponent extends BasicLineChartComponent implements OnInit, OnChanges {
-  @Property('类型', { ui: { hidden: true } })
-  type = 'basic';
-  @Property('图表样式', {
-    ui: {
-      widget: 'myImageExample',
-      spanLabel: 24,
-      spanControl: 24,
-      reset: ['barColor'],
-      example: [
-        {
-          background: 'assets/img/screen/bar1.png',
-          data: { barColor: { gradient: true, value: [['#FFEF66', '#FF851D']] } },
-        },
-        {
-          background: 'assets/img/screen/bar2.png',
-          data: { barColor: { gradient: true, value: [['#00FECB', '#00D191']] } },
-        },
-        {
-          background: 'assets/img/screen/bar3.png',
-          data: { barColor: { gradient: true, value: [['#00D2FD', '#3285FF']] } },
-        },
-        {
-          background: 'assets/img/screen/bar4.png',
-          data: { barColor: { gradient: true, value: [['#FF3699', '#8934F8']] } },
-        },
-      ],
-    },
-  })
-  example: any;
-  @Property('填充', {
-    ui: {
-      widget: 'seriesColor',
-      type: 'gradual',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  barColor = { gradient: true, value: [['#00D2FD', '#3285FF']] };
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#595F7A',
-    weight: 'normal',
-    size: 12,
-    space: 0,
-    lineHeight: 12,
-  };
-  @Property('单系多色')
-  colorSwitch: boolean;
-
-  @Property('类别颜色', {
-    ui: {
-      widget: 'seriesColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-      visibleIf: { colorSwitch: [true] },
-    },
-  })
-  colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
-  @Property('边距', { ui: { widget: 'myGrid' } })
-  grid: any = {
-    top: 30,
-    right: 30,
-    bottom: 36,
-    left: 38,
-  };
-  @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: 'true' },
-      { label: 'x轴', value: '0' },
-      { label: 'y轴', value: '1' },
-      { label: '两轴', value: 'false' },
-    ],
-  })
-  axisShow = 'true';
-  @Property('刻度隐藏', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '无', value: 'true' },
-      { label: 'x轴', value: '0' },
-      { label: 'y轴', value: '1' },
-      { label: '两轴', value: 'false' },
-    ],
-  })
-  scaleShow = 'true';
-  // @Property('轴单位', {ui: {widget: 'myUnit'}})
-  // unit = {x: '', y: '', yMax: ''};
-  @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('网络线', {
-    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
-  })
-  netLine = false;
-  @Property('网络线颜色', {
-    ui: {
-      widget: 'myColor',
-      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
-    },
-  })
-  netLineColor = 'rgba(255,255,255,0.2)';
-  @Property('标签', {
-    ui: { widget: 'select' },
-    enum: [
-      { label: '无', value: 'none' },
-      { label: '居上', value: 'top' },
-      { label: '居中', value: 'inside' },
-      { label: '居右', value: 'right' },
-    ],
-  })
-  labelDirection = 'none';
-  @Property('列间距', { ui: { widget: 'myRange', min: 0, max: 100, step: 10 } })
-  barCategoryGap = 40;
-  @Property('圆角', { ui: { widget: 'myRange', min: 0, max: 100, step: 1 } })
-  barBorderRadius: 20;
-  @Property('x轴类型', {
-    enum: [
-      { label: '类目', value: 'category' },
-      { label: '时间', value: 'time' },
-    ],
-  })
-  xType = 'category';
-  @Property('轴标签角度', {
-    ui: { widget: 'myRange', min: -90, max: 90, step: 10 },
-  })
-  xLabelRotate = 0;
-  @Property('x轴文本宽度')
-  xLabelWidth: number;
-  @Property('x轴文字宽度超出', {
-    enum: [
-      { label: '自动', value: 'auto' },
-      { label: '截断', value: 'truncate' },
-      { label: '换行', value: 'break' },
-      { label: '强制换行', value: 'breakAll' },
-    ],
-  })
-  xLabelOverflow = 'auto';
-  @Property('标签显示间隔', {
-    ui: {
-      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('显示柱条背景', { type: 'boolean' })
-  showBackground = true;
-  @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;
-  chartOption: any = {};
-
-  @Data({
-    properties: {
-      x: { type: 'string', title: '类目' },
-      y: { type: 'number', title: '值' },
-      s: { type: 'string', title: '系列' },
-    },
-  })
-  _data = [
-    { 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 = [];
-  color = [];
-  legends = [];
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes._data) {
-      // this.reloadData();
-      const dataShadow: number[] = [];
-      const maxNum = this.getMaxY();
-      dataShadow.fill(maxNum, 0, this.xData.length);
-      const textStyle = this.getTextStyle(this.font);
-      this.style = textStyle;
-      let hori = this.horizontal;
-      let barColors: string[][];
-      if (this.barColor && this.barColor.value) {
-        barColors = this.barColor.value;
-      } else {
-        barColors = this.barColor as any;
-      }
-      this.color = barColors.map((barColor) => ({
-        type: 'linear',
-        x: 0,
-        y: 0,
-        x2: hori ? 1 : 0,
-        y2: hori ? 0 : 1,
-        global: false,
-        colorStops: [
-          { offset: 0, color: barColor[0] },
-          { offset: 1, color: barColor[1] },
-        ],
-      }));
-
-      let xAxis: any = this.getXAxis();
-
-      let yAxis: any = this.getYAxis();
-      let grid: any = {
-        top: this.grid.top,
-        right: this.grid.right,
-        left: this.grid.left,
-        bottom: this.grid.bottom,
-      };
-      if (this.type === 'dcolor') {
-        const yAxis1 = yAxis;
-        const yAxis2 = this.getYAxis();
-        yAxis1.inverse = true;
-        yAxis = [yAxis1, yAxis2];
-        yAxis.forEach((axis, i) => {
-          axis.gridIndex = i;
-          axis.position = 'top';
-        });
-        xAxis = [xAxis, this.getXAxis()];
-        xAxis.forEach((axis, i) => {
-          axis.gridIndex = i;
-        });
-        grid = [
-          {
-            right: '50%',
-          },
-          {
-            left: '50%',
-          },
-        ];
-      }
-      const dataZoom = this.getDataZoom();
-      this.chartOption = {
-        dataZoom,
-        tooltip: this.getTooltip(),
-        legend: this.getLegend(),
-        grid,
-        xAxis: !hori ? xAxis : yAxis,
-        yAxis: !hori ? yAxis : xAxis,
-        color: this.color,
-        series: [],
-      };
-      this.reloadData();
-    }
-  }
-
-  ngOnInit() {}
-
-  get horizontal(): boolean {
-    return this.type === 'hori' || this.type === 'horiD' || this.type === 'dcolor';
-  }
-
-  getXAxis(): any {
-    let XdisplayScaleShow =
-      this.scaleShow === 'true' ? true : this.scaleShow === '0' ? false : this.scaleShow === '1' ? true : false;
-    return {
-      nameTextStyle: this.style,
-      type: this.xType || 'category',
-      name: this.xUnit,
-      axisLine: {
-        show: this.axisShow === 'true' ? true : this.axisShow === '0' ? false : this.axisShow === '1' ? true : false,
-        lineStyle: {
-          color: this.font.color,
-        },
-      },
-      axisTick: {
-        show: XdisplayScaleShow,
-      },
-      axisLabel: {
-        ...this.style,
-        show: XdisplayScaleShow,
-        rotate: this.xLabelRotate,
-        width: this.xLabelWidth,
-        overflow: this.xLabelOverflow,
-        interval: this.xLabelInterval,
-      },
-    };
-  }
-
-  getYAxis(): any {
-    let YdisplayScaleShow =
-      this.scaleShow === 'true' ? true : this.scaleShow === '0' ? true : this.scaleShow === '1' ? false : false;
-    return {
-      nameTextStyle: this.style,
-      type: 'value',
-      name: this.yUnit,
-      axisLine: {
-        show: this.axisShow === 'true' ? true : this.axisShow === '0' ? true : this.axisShow === '1' ? false : false,
-        lineStyle: {
-          color: this.font.color,
-        },
-      },
-      axisTick: {
-        show: YdisplayScaleShow,
-      },
-      min: this.yMin,
-      max: (value) => {
-        const yMax = Number(this.yMax ? this.yMax : value.max);
-        return Math.ceil(this.yMaxAddNum ? yMax + Number(this.yMaxAddNum) : yMax);
-      },
-      axisLabel: {
-        ...this.style,
-        show: YdisplayScaleShow,
-        // formatter: '{value}' + this.yUnit,
-      },
-      splitLine: {
-        show: this.netLine,
-        lineStyle: {
-          type: 'dashed',
-          color: this.netLineColor,
-        },
-      },
-      minInterval: this.yMinInterval,
-    };
-  }
-
-  setSeriesStyle(name: string, datasetIndex: number) {
-    const textStyle = this.style;
-    const i = this.chartOption.series.length;
-    const series = {
-      name,
-      showBackground: this.showBackground,
-      xAxisIndex: this.type === 'dcolor' ? i : 0,
-      yAxisIndex: this.type === 'dcolor' ? i : 0,
-      label: {
-        normal: {
-          show: this.labelDirection === 'none' ? false : true,
-          // formatter: '{@' + name + '}',
-          position: this.labelDirection || '',
-          textStyle,
-        },
-      },
-      barCategoryGap: this.barCategoryGap + '%',
-      itemStyle: {
-        barBorderRadius: this.barBorderRadius,
-      },
-      stack: this.type === 'double' || this.type === 'horiD' ? '0' : null,
-      type: 'bar',
-      areaStyle: {
-        opacity: 0,
-      },
-      emphasis: {
-        focus: this.type === 'double' || this.type === 'horiD' ? 'series' : null,
-      },
-      encode: this.horizontal ? { y: 'x', x: 'y' } : { x: 'x', y: 'y' },
-      datasetIndex,
-    };
-    this.chartOption.series.push(series);
-    return series;
-  }
-}

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

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

package/src/lib/basic-line-chart/basic-line-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-line-chart/basic-line-chart.component.less

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

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

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