style: unified chart style (#63)

* docs: update changelog

* style: unified style of chart

* style: modify style about background

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.0.8](https://github.com/Erda-FE/dashboard-configuration/pull/62/commits/73dc6ba46acb59041a1da33bf5e17fbc1ffd35e6) (2021-03-01)
+
+### Bug Fixes
+
+* complete i18n in charts
+
 ## [2.0.7](https://github.com/Erda-FE/dashboard-configuration/pull/57/commits/1dfd74dd17d1a5b8144dd153192ce8597c5a2974) (2021-01-20)
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erda-ui/dashboard-configurator",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Erda dashboard configurator powered by Echart",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/components/DcBoard/index.scss

@@ -7,10 +7,10 @@ $grid-prefix-cls: #{$prefix}-dashboard;
   width: 100%;
   height: 100%;
   border-radius: $box-radius;
-  background: $content-background-color;
+  background-color: $color-white;
 
   &.active {
-    background: $color-primary-1;
+    background: $content-background-color;
   }
 
   // 全屏样式，不能合并一起简写，否则不生效
@@ -32,7 +32,6 @@ $grid-prefix-cls: #{$prefix}-dashboard;
 }
 
 .#{$prefix}-dashboard-content {
-  padding: 12px 16px;
   overflow-x: hidden;
   overflow-y: auto;
 }

src/components/DcBoard/index.tsx

@@ -77,7 +77,6 @@ const DcBoard = ({
         ref={boardRef}
         className={classnames({
           'dc-dashboard': true,
-          'dark-border': true,
           'v-flex-box': true,
           active: isEditMode,
         })}

src/components/DcBoard/pure-board.tsx

@@ -26,7 +26,6 @@ const PureDashboard = ({ name, layout, showOptions = false, globalVariable, onBo
         ref={boardRef}
         className={classnames({
           'dc-dashboard': true,
-          'dark-border': true,
           'v-flex-box': true,
         })}
       >

src/components/DcCharts/chart-funnel/default-option.ts

@@ -1,9 +1,16 @@
 export default () => ({
+  backgroundColor: 'transparent',
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c}%',
+    renderMode: 'html',
+    appendToBody: true,
   },
   legend: {
     type: 'scroll',
+    icon: 'reat',
+    itemWidth: 12,
+    itemHeight: 3,
+    bottom: true,
   },
 });

src/components/DcCharts/chart-line/default-option.ts

@@ -1,15 +1,21 @@
 import { cutStr } from 'src/common/utils';
 
 export default () => ({
+  backgroundColor: 'transparent',
   tooltip: {
     trigger: 'axis',
     transitionDuration: 0,
     confine: true,
+    renderMode: 'html',
+    appendToBody: true,
   },
   legend: {
     orient: 'horizontal',
     align: 'left',
     type: 'scroll',
+    icon: 'reat',
+    itemWidth: 12,
+    itemHeight: 3,
     tooltip: {
       show: true,
       formatter: (t: any) => cutStr(t.name, 100),

src/components/DcCharts/chart-line/option.ts

@@ -103,7 +103,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
     yAxis[yAxisIndex] = {
       show: yAxisIndex === 0,
       // 轴线名
-      name: yAxisNames[yAxisIndex] || valueNames[yAxisIndex] || i18n?.alias?.[locale] || name || '',
+      // name: yAxisNames[yAxisIndex] || valueNames[yAxisIndex] || i18n?.alias?.[locale] || name || '',
       // 轴线名位置
       nameLocation: 'center',
       // 轴线名离轴线间距
@@ -197,6 +197,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
     legend: {
       data: legendData,
       formatter: lgFormatter,
+      bottom: true,
     },
     xAxis: [
       {

src/components/DcCharts/chart-map/default-option.ts

@@ -1,7 +1,10 @@
 export default () => ({
+  backgroundColor: 'transparent',
   tooltip: {
     trigger: 'item',
     transitionDuration: 0.5,
+    renderMode: 'html',
+    appendToBody: true,
   },
   legend: {
     orient: 'vertical',

src/components/DcCharts/chart-pie/default-option.ts

@@ -1,12 +1,16 @@
 export default () => ({
+  backgroundColor: 'transparent',
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c} ({d}%)',
+    renderMode: 'html',
+    appendToBody: true,
   },
   legend: {
     type: 'scroll',
-    orient: 'vertical',
-    x: 'right',
-    y: 'center',
+    icon: 'reat',
+    itemWidth: 12,
+    itemHeight: 3,
+    bottom: true,
   },
 });

src/components/DcContainer/index.scss

@@ -8,9 +8,7 @@ $chart-prefix-cls: #{$prefix}-chart;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: #fff;
-  border: $border;
-  border-radius: $box-radius;
+  background: rgba(48, 38, 71, 0.02);
 
   &:hover {
     // border: 1px dashed $color-primary;
@@ -63,8 +61,9 @@ $chart-prefix-cls: #{$prefix}-chart;
 
   &-title {
     margin: 0;
-    color: $color-text;
-    font-weight: 700;
+    // color: $color-text;
+    color: rgba(48, 38, 71, 0.8);
+    // font-weight: 700;
     font-size: 14px;
   }
 }

src/types/index.d.ts

@@ -262,7 +262,7 @@ declare namespace DC {
 
   interface DiceDataConfigProps {
     dataConfigMetaDataStore: Object;
-    dynamicFilterMetaDataStore: Object;
+    dynamicFilterMetaDataStore?: Object;
     scope: string;
     scopeId: string;
     loadDataApi: Object;