主题切换逻辑

kanban-client/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
-data/
+data/
+**/*.css

kanban-client/app/assets/Form/index.less

@@ -1,12 +1,3 @@
-html,body,#root{
-    height: 100%;
-    font-size: 16px;
-    overflow: hidden;
-}
-#root {
-    background-color: #2f2e2c;
-}
-
 @prefixCls: rc-form;
 
 .@{prefixCls} {
@@ -32,7 +23,7 @@ html,body,#root{
     width: 100%;
     height: 100%;
     margin: 0 auto;
-    background: #2f2e2c;
+    background: transparent;
     color: #f5fdff;
     vertical-align: middle;
     text-align: center;

kanban-client/app/assets/Table/index.less

@@ -13,7 +13,7 @@
 }
 
 .@{prefixCls}-thead {
-    background-color: #010101;
+    background-color: transparent;
 }
 
 .@{prefixCls}-header-item {

kanban-client/app/assets/layoutStyle.less

@@ -0,0 +1,107 @@
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: se-resize;
+}
+
+#content {
+  width: 100%;
+}
+.react-grid-layout {
+  background: transparent;
+}
+.layoutJSON {
+  background: #ddd;
+  border: 1px solid black;
+  margin-top: 10px;
+  padding: 10px;
+}
+.columns {
+  -moz-columns: 120px;
+  -webkit-columns: 120px;
+  columns: 120px;
+}
+.react-grid-item {
+  box-sizing: content-box;
+}
+.react-grid-item:not(.react-grid-placeholder) {
+  background: transparent;
+  border: 1px solid black;
+}
+.react-grid-item.resizing {
+  opacity: 0.9;
+}
+.react-grid-item.static {
+  background: transparent;
+}
+.react-grid-item .text {
+  font-size: 24px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 24px;
+}
+.react-grid-item .minMax {
+  font-size: 12px;
+}
+.react-grid-item .add {
+  cursor: pointer;
+}
+.react-grid-dragHandleExample{
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+li b {
+  font-size: 19px;
+  line-height: 14px;
+}
+

kanban-client/app/assets/main.less

@@ -0,0 +1,10 @@
+@import url("./theme/all");
+
+html,body,#root{
+    height: 100%;
+    font-size: 16px;
+    overflow: hidden;
+}
+#root {
+    background-color: @base-color;
+}

kanban-client/app/assets/theme/all.less

@@ -0,0 +1,2 @@
+@import url("dark");
+// @import url("blue");

kanban-client/app/assets/theme/blue.less

@@ -0,0 +1,3 @@
+//蓝色主题样式变量
+@theme-name: "blue"; // 主题名称
+@base-color: color("#04224F"); // 主题颜色

kanban-client/app/assets/theme/dark.less

@@ -0,0 +1,3 @@
+//黑色主题样式变量
+@theme-name: "dark"; // 主题名称
+@base-color: color("#2F2E2C"); // 主题颜色

kanban-client/app/component/Layout.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { WidthProvider } from 'react-grid-layout';
 var ReactGridLayout = WidthProvider(require('react-grid-layout'));
-import '../assets/layoutStyle.css';
+import '../assets/layoutStyle.less';
 
 import Form from '../src/Form/index.js';
 import Table from './Table.jsx';
@@ -30,6 +29,7 @@ class BasicLayout extends React.Component {
     items: [],
     onLayoutChange: (l) => { },
     cols: 10, // 屏幕横宽最大值
+    rowHeight: 50,
     margin: [0, 0], // 元素间隔
     verticalCompact: false, // 垂直方向贴靠
     useCSSTransforms: false, // 使用动画
@@ -38,16 +38,16 @@ class BasicLayout extends React.Component {
 
   // 创建div元素
   generateDOM() {
-    const { items } = this.newProps;
+    const { items, theme, themeConfig } = this.newProps;
 
     return items.map(function (item, i) {
       let { type, config } = item;
       if (type == 'form') {
-        return (<div key={i}><Form {...config} /></div>);
+        return (<div key={i}><Form theme={theme} themeConfig={themeConfig.form} {...config} /></div>);
       } else if (type == 'table') {
-        return (<div key={i}><Table {...config} /></div>);
+        return (<div key={i}><Table theme={theme} themeConfig={themeConfig.table} {...config} /></div>);
       } else if (type == 'charts') {
-        return <div key={i}><Charts {...config} /></div>
+        return <div key={i}><Charts theme={theme} themeConfig={themeConfig.charts} {...config} /></div>
       } else {
         return (<div key={i}><span className="text">{i}</span></div>);
       }

kanban-client/app/component/Table.jsx

@@ -73,6 +73,7 @@ class TableModel extends React.Component {
 	onShow() {
 		this.adaptiveRowSize();
 		this.switchAnimate();
+		this.applyTheme();
 	}
 
 	// 定时任务
@@ -247,6 +248,34 @@ class TableModel extends React.Component {
 		return title;
 	}
 
+	applyTheme() {
+		let { themeConfig } = this.newProps;
+		themeConfig = themeConfig || {
+			head: {},
+			cells: {}
+		};
+		let { head, cells } = themeConfig;
+		let node = this.refs.body;
+		let table = node.getElementsByClassName('rc-table')[0];
+
+		let thCells = table.getElementsByTagName('th');
+        let tdCells = table.getElementsByTagName('td');
+
+        for(let j = 0; j < thCells.length; j++) {
+			let cell = thCells[j];
+			for(let k in head) {
+				cell.style[k] = head[k];
+			}
+        }
+
+        for(let i = 0; i < tdCells.length; i++) {
+            let cell = tdCells[i];
+			for(let k in cells) {
+				cell.style[k] = cells[k];
+			}
+        }
+	}
+
 	render() {
 		const { fontSize } = this.newProps;
 		return (

kanban-client/app/component/factory.dev.js

@@ -5,16 +5,21 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.js';
 import URL from '../constants/url.dev.json';
 import 'whatwg-fetch';
+import { getThemeConfig, applyTheme } from './theme/applyTheme.js';
 
-import tempdata from '../data/testline.json';
+import tempdata from '../data/主题测试1.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local';
+        this.dev = 'local ';
+        this.theme = 'blue';
+        
         this.index = 0;
         this.state = {
+            theme: 'dark',
+            themeConfig: {},
             titleHeight: 0,
             error: null,
             firstRequestTime: new Date()
@@ -28,6 +33,13 @@ class Factory extends React.Component {
             credentials: 'include'
         }).then(function (response) {
             return (response.json())
+        }).then((json) => {
+            let theme = json.theme || 'dark';
+            me.setState({
+                theme: theme,
+                themeConfig: getThemeConfig(theme),
+            });
+            return json;
         }).then((json) => {
             if(!json.instance) {
                 throw {message: json.message};
@@ -47,6 +59,11 @@ class Factory extends React.Component {
                 msg: null,
                 model: converter(modelconfig),
             });
+        }).then(() => {
+            applyTheme(me.state.theme);
+            me.setState({
+                titleHeight: me.getTitleHeight(),
+            });
         }).catch(function (ex) {
             let message = ex.message;
             if(ex.name && ex.name == 'TypeError') {
@@ -115,6 +132,8 @@ class Factory extends React.Component {
         let { code, index } = this.props;
         if(this.dev == 'local') {
             this.setState({
+                theme: this.theme,
+                themeConfig: getThemeConfig(this.theme),
                 model: converter(tempdata.data[0]),
             });
             this.refreshNext = setInterval(function () {
@@ -135,8 +154,9 @@ class Factory extends React.Component {
 
     componentDidMount() {
         window.addEventListener('resize', this.onWindowResize.bind(this));
+        applyTheme(this.state.theme);
         this.setState({
-            titleHeight: this.getTitleHeight()
+            titleHeight: this.getTitleHeight(),
         });
     }
     componentWillUnmount() {
@@ -157,7 +177,7 @@ class Factory extends React.Component {
     }
 
     render() {
-        let { titleHeight, model, msg } = this.state;
+        let { theme, themeConfig, titleHeight, model, msg } = this.state;
         if (msg) {
             return <MessageBox static={this.props.static} titleHeight={titleHeight} msg={msg} />
         }
@@ -172,10 +192,13 @@ class Factory extends React.Component {
             items = fixedbox.items || [];
         }
 
+        let itemMargin = themeConfig.items ? (themeConfig.items.margin || [0, 0]) : [0, 0];
+        let containerHeight = window.innerHeight - titleHeight - (10 * itemMargin[1] + itemMargin[1]);
+        let rowHeight = containerHeight / 10;
         return (
-            <div ref='body'>
+            <div ref='body' className={theme}>
                 <Title setTitleHeight={this.setTitleHeight.bind(this)} {...titleConfig} />
-                <Container items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
+                <Container theme={theme} themeConfig={themeConfig} items={content.items} rowHeight={rowHeight} margin={itemMargin}/>
             </div>
         );
     }

kanban-client/app/component/factory.js

@@ -5,6 +5,7 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.js';
 import URL from '../constants/url.json';
 import 'whatwg-fetch';
+import { getThemeConfig, applyTheme } from './theme/applyTheme.js';
 
 class Factory extends React.Component {
 
@@ -12,6 +13,8 @@ class Factory extends React.Component {
         super(props);
         this.index = 0;
         this.state = {
+            theme: 'dark',
+            themeConfig: {},
             titleHeight: 0,
             error: null
         };
@@ -25,6 +28,13 @@ class Factory extends React.Component {
             credentials: 'include'
         }).then(function (response) {
             return (response.json())
+        }).then((json) => {
+            let theme = json.theme || 'dark';
+            me.setState({
+                theme: theme,
+                themeConfig: getThemeConfig(theme),
+            });
+            return json;
         }).then((json) => {
             if(!json.instance) {
                 throw {message: json.message};
@@ -44,6 +54,11 @@ class Factory extends React.Component {
                 msg: null,
                 model: converter(modelconfig),
             });
+        }).then(() => {
+            applyTheme(me.state.theme);
+            me.setState({
+                titleHeight: me.getTitleHeight(),
+            });
         }).catch(function (ex) {
             let message = ex.message;
             if(ex.name && ex.name == 'TypeError') {
@@ -116,6 +131,7 @@ class Factory extends React.Component {
 
     componentDidMount() {
         window.addEventListener('resize', this.onWindowResize.bind(this));
+        applyTheme(this.state.theme);
         this.setState({
             titleHeight: this.getTitleHeight()
         });
@@ -138,7 +154,7 @@ class Factory extends React.Component {
     }
 
     render() {
-        let { titleHeight, model, msg } = this.state;
+        let { theme, themeConfig, titleHeight, model, msg } = this.state;
         if (msg) {
             return <MessageBox static={this.props.static} titleHeight={titleHeight} msg={msg} />
         }
@@ -152,10 +168,14 @@ class Factory extends React.Component {
         if (fixedbox) {
             items = fixedbox.items || [];
         }
+
+        let itemMargin = themeConfig.items ? (themeConfig.items.margin || [0, 0]) : [0, 0];
+        let containerHeight = window.innerHeight - titleHeight - (10 * itemMargin[1] + itemMargin[1]);
+        let rowHeight = containerHeight / 10;
         return (
-            <div>
+            <div ref='body' className={theme}>
                 <Title setTitleHeight={this.setTitleHeight.bind(this)} {...titleConfig} />
-                <Container items={content.items} rowHeight={(window.innerHeight - titleHeight) / 10} />
+                <Container theme={theme} themeConfig={themeConfig} items={content.items} rowHeight={rowHeight} margin={itemMargin}/>
             </div>
         );
     }

kanban-client/app/component/theme/applyTheme.js

@@ -0,0 +1,82 @@
+import themes from './index.js';
+
+function getThemeConfig(themeName) {
+    let theme = themes[themeName];
+    let themeConfig = {};
+    for(let key in theme) {
+        let p = theme[key];
+        for(let k in p) {
+            if(k == 'config') {
+                themeConfig[key] = p[k]
+            }
+        }
+    }
+    return themeConfig;
+}
+
+function applyTheme(themeName) {
+    let theme = themes[themeName];
+    applyRoot(theme);
+    applyTitle(theme);
+    applyLayout(theme);
+    applyItems(theme);
+    applyTable(theme);
+}
+
+/**
+ * 总体样式应用
+ */
+function applyRoot(theme) {
+    let root = document.getElementById('root');
+    let styles = theme.root;
+
+    for(let styleKey in styles) {
+        root.style[styleKey] = styles[styleKey];
+    }
+}
+
+function applyTitle(theme) {
+    let title = document.getElementsByClassName('rc-title')[0];
+    let styles = theme.title;
+    
+    if(title) {
+        for(let styleKey in styles) {
+            title.style[styleKey] = styles[styleKey];
+        }
+    }
+}
+
+function applyLayout(theme) {
+    let layout = document.getElementsByClassName('react-grid-layout')[0];
+    let styles = theme.layout;
+
+    if(layout) {
+        for(let styleKey in styles) {
+            layout.style[styleKey] = styles[styleKey];
+        }
+    }
+}
+
+/**
+ * 图形基本样式
+ */
+function applyItems(theme) {
+    let items = document.getElementsByClassName('react-grid-item');
+    let styles = theme.items;
+
+    if(items.length > 0) {
+        for(let i = 0; i < items.length; i++) {
+            let item = items[i];
+    
+            for(let styleKey in styles) {
+                item.style[styleKey] = styles[styleKey];
+            }
+        }
+    }
+}
+
+function applyTable(theme) {
+    return;
+}
+
+export { getThemeConfig, applyTheme };

kanban-client/app/component/theme/blue.js

@@ -0,0 +1,42 @@
+var blue = {
+    root: {
+        backgroundColor: '#04224F',
+        backgroundImage: '-webkit-linear-gradient(top, transparent 40px, #14305C 42px),-webkit-linear-gradient(left, transparent 40px, #14305C 42px)',
+        backgroundSize: '42px 42px'
+    },
+    title: {
+        padding: '10px 10px 0 10px',
+        backgroundColor: 'linear-gradient(to right, #6b73fd, #b195ff)',
+        borderWidth: 0,
+        borderColor: '#114591',
+    },
+    layout: {
+        // padding: '10px 0 0 10px'
+    },
+    items: {
+        border: '1px solid #055CB6',
+        boxShadow: 'inset 0 0 43px 0 rgba(5,92,182,0.62)',
+        config: {
+            margin: [10, 10]
+        }
+    },
+    table: {
+        config: {
+            head: {
+                textAlign: 'center',
+                background: 'rgb(30, 76, 190)',
+                borderWidth: '0 0.5px 0 0',
+                borderStyle: 'solid',
+                borderColor: '#6589BB'
+            },
+            cells: {
+                textAlign: 'center',
+                borderWidth: '0 0.5px 0 0',
+                borderStyle: 'solid',
+                borderColor: '#6589BB'
+            }
+        }
+    }
+};
+
+module.exports = blue;

kanban-client/app/component/theme/dark.js

@@ -0,0 +1,25 @@
+var dark = {
+    root: {
+        backgroundColor: '#2f2e2c',
+        backgroundImage: 'none'
+    },
+    title: {
+        padding: '0',
+        backgroundColor: 'transparent',
+        borderWidth: 0
+    },
+    layout: {
+        // padding: '10px 0 0 10px'
+    },
+    items: {
+        border: '1px solid black',
+        boxShadow: 'none',
+        config: {
+            margin: [0, 0]
+        }
+    },
+    table: {
+    }
+};
+
+module.exports = dark;

kanban-client/app/component/theme/index.js

@@ -0,0 +1,9 @@
+import dark from './dark.js';
+import blue from './blue.js';
+
+var themes = {
+    dark,
+    blue
+}
+
+module.exports = themes;

kanban-client/app/data/testform.json

@@ -33,8 +33,7 @@
                             "columns": 2,
                             "fieldstyle": "{\"textAlign\": \"center\"}",
                             "header": {
-                                "text": "今日特价", 
-                                "style": "{\"color\": \"green\",\"border\": \"1px solid white\"}"
+                                "text": "今日特价"
                             }
                             
                         },

kanban-client/app/data/testtable.json

@@ -15,22 +15,7 @@
                             "title": {"text": "车间执行看板"},
                             "pagesize": 10,
                             "data": [{
-                                "时段": "8~9",
-                                "达成率": "78%",
-                                "投入数": 208,
-                                "良品产出": 156,
-                                "不良数": 8,
-                                "计划数": 200,
-                                "直通率": "96.2%"
-                            }, {
-                                "时段": "9~10",
-                                "达成率": "85%",
-                                "投入数": 366,
-                                "良品产出": 169,
-                                "不良数": 7,
-                                "计划数": 200,
-                                "直通率": "98.1%"
-                            }, {
+                                
                                 "时段": "10~11",
                                 "达成率": "42%",
                                 "投入数": 367,
@@ -140,11 +125,12 @@
                                 "title": "达成率",
                                 "sort": 0,
                                 "dataIndex": "达成率",
+                                "width": 100,
                                 "render": "function(value,record,index) {   value = value ? value+'' : ''; var num = Number(value.replace('%', '')); ;if(num<100){return{children:value,props:{style:{\"color\":\"#FF0000\"}}}}  else{return{children:value,props:{style:{\"color\":\"#00FF00\"}}}}}"
                             }, {
                                 "title": "一次直通率",
                                 "sort": 0,
-                                "width": 120,
+                                "width": 100,
                                 "dataIndex": "直通率"
                             }, {
                                 "title": "备注",

kanban-client/app/main.dev.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Factory from './component/factory.dev.js';
-import DateFormatter from './utils/DateTimeUtils.js';
 import Promise from 'promise-polyfill';
-  
+import './assets/main.less';
+
 Object.assign = Object.assign || function(target, varArgs) {
 	if (target == null) {
 		throw new TypeError('Cannot convert undefined or null to object');
@@ -29,7 +29,7 @@ if (!window.Promise) {
 	window.Promise = Promise;  
 }  
 
-var code = 'A73B24B0233';
+var code = 'AA2A1A7B2AA';
 var index = 0;
 
 ReactDOM.render(

kanban-client/app/main.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Factory from './component/factory.js';
-import DateFormatter from './utils/DateTimeUtils.js';
 import Promise from 'promise-polyfill';
 import {getUrlParam} from './utils/BaseUtils';
+import './assets/main.less';
 
 Object.assign = Object.assign || function(target, varArgs) {
 	if (target == null) {

kanban-client/app/src/Charts/ECharts.dev.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {isEqual} from '../../utils/BaseUtils.js';
 import ReactEcharts from 'echarts-for-react';
 import reset from './ResetCharts.js';
-import {dark} from './Theme/Theme.js';
+import './Theme/Theme.js';
 
 export class ReactEchart extends React.Component {
     constructor(props) {

kanban-client/app/src/Charts/ECharts.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {isEqual, hashcode} from '../../utils/BaseUtils.js';
 import ReactEcharts from 'echarts-for-react';
 import reset from './ResetCharts.js';
-import {dark} from './Theme/Theme.js';
+import './Theme/Theme.js';
 
 export class ReactEchart extends React.Component {
     constructor(props) {
@@ -24,6 +24,7 @@ export class ReactEchart extends React.Component {
         let node = this.echarts_react.echartsElement;
         let option = reset(this.newProps.option, node, this.showCount);
         this.setState({
+            theme: this.newProps.theme,
             option: option
         });
     }

kanban-client/app/src/Charts/Theme/Theme.js

@@ -1,3 +1,4 @@
 import dark from './dark.js';
+import blue from './blue.js';
 
-export {dark};
+export {dark, blue};

kanban-client/app/src/Charts/Theme/blue.js

@@ -0,0 +1,522 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    echarts.registerTheme('blue', {
+        "color": [
+            "#2d8bf8",
+            "#ebbb31",
+            "#fe7d6b",
+            "#46e4e8",
+            "#91c7ae",
+            "#749f83",
+            "#ca8622",
+            "#bda29a",
+            "#6e7074",
+            "#546570",
+            "#c4ccd3"
+        ],
+        "backgroundColor": "transparent",
+        "textStyle": {},
+        "title": {
+            "textStyle": {
+                "color": "#ffffff"
+            },
+            "subtextStyle": {
+                "color": "#aaa"
+            }
+        },
+        "line": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 1
+                }
+            },
+            "lineStyle": {
+                "normal": {
+                    "width": 2
+                }
+            },
+            "symbolSize": 4,
+            "symbol": "emptyCircle",
+            "smooth": false
+        },
+        "radar": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 1
+                }
+            },
+            "lineStyle": {
+                "normal": {
+                    "width": 2
+                }
+            },
+            "symbolSize": 4,
+            "symbol": "emptyCircle",
+            "smooth": false
+        },
+        "bar": {
+            "itemStyle": {
+                "normal": {
+                    "barBorderWidth": 0,
+                    "barBorderColor": "#ccc"
+                },
+                "emphasis": {
+                    "barBorderWidth": 0,
+                    "barBorderColor": "#ccc"
+                }
+            }
+        },
+        "pie": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "scatter": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "boxplot": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "parallel": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "sankey": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "funnel": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "gauge": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                },
+                "emphasis": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            }
+        },
+        "candlestick": {
+            "itemStyle": {
+                "normal": {
+                    "color": "#c23531",
+                    "color0": "#314656",
+                    "borderColor": "#c23531",
+                    "borderColor0": "#314656",
+                    "borderWidth": 1
+                }
+            }
+        },
+        "graph": {
+            "itemStyle": {
+                "normal": {
+                    "borderWidth": 0,
+                    "borderColor": "#ccc"
+                }
+            },
+            "lineStyle": {
+                "normal": {
+                    "width": 1,
+                    "color": "#aaa"
+                }
+            },
+            "symbolSize": 4,
+            "symbol": "emptyCircle",
+            "smooth": false,
+            "color": [
+                "#2d8bf8",
+                "#ebbb31",
+                "#fe7d6b",
+                "#46e4e8",
+                "#91c7ae",
+                "#749f83",
+                "#ca8622",
+                "#bda29a",
+                "#6e7074",
+                "#546570",
+                "#c4ccd3"
+            ],
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#eee"
+                    }
+                }
+            }
+        },
+        "map": {
+            "itemStyle": {
+                "normal": {
+                    "areaColor": "#eee",
+                    "borderColor": "#444",
+                    "borderWidth": 0.5
+                },
+                "emphasis": {
+                    "areaColor": "rgba(255,215,0,0.8)",
+                    "borderColor": "#444",
+                    "borderWidth": 1
+                }
+            },
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#000"
+                    }
+                },
+                "emphasis": {
+                    "textStyle": {
+                        "color": "rgb(100,0,0)"
+                    }
+                }
+            }
+        },
+        "geo": {
+            "itemStyle": {
+                "normal": {
+                    "areaColor": "#eee",
+                    "borderColor": "#444",
+                    "borderWidth": 0.5
+                },
+                "emphasis": {
+                    "areaColor": "rgba(255,215,0,0.8)",
+                    "borderColor": "#444",
+                    "borderWidth": 1
+                }
+            },
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#000"
+                    }
+                },
+                "emphasis": {
+                    "textStyle": {
+                        "color": "rgb(100,0,0)"
+                    }
+                }
+            }
+        },
+        "categoryAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#609cd1"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#609cd1"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "textStyle": {
+                    "color": "#609cd1"
+                }
+            },
+            "splitLine": {
+                "show": false,
+                "lineStyle": {
+                    "color": [
+                        "#ccc"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "rgba(250,250,250,0.3)",
+                        "rgba(200,200,200,0.3)"
+                    ]
+                }
+            }
+        },
+        "valueAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "textStyle": {
+                    "color": "#609cd1"
+                }
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#4d79a1"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "rgba(250,250,250,0.3)",
+                        "rgba(200,200,200,0.3)"
+                    ]
+                }
+            }
+        },
+        "logAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#4d79a1"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "rgba(250,250,250,0.3)",
+                        "rgba(200,200,200,0.3)"
+                    ]
+                }
+            }
+        },
+        "timeAxis": {
+            "axisLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisTick": {
+                "show": true,
+                "lineStyle": {
+                    "color": "#4d79a1"
+                }
+            },
+            "axisLabel": {
+                "show": true,
+                "textStyle": {
+                    "color": "#ffffff"
+                }
+            },
+            "splitLine": {
+                "show": true,
+                "lineStyle": {
+                    "color": [
+                        "#ccc"
+                    ]
+                }
+            },
+            "splitArea": {
+                "show": false,
+                "areaStyle": {
+                    "color": [
+                        "rgba(250,250,250,0.3)",
+                        "rgba(200,200,200,0.3)"
+                    ]
+                }
+            }
+        },
+        "toolbox": {
+            "iconStyle": {
+                "normal": {
+                    "borderColor": "#999"
+                },
+                "emphasis": {
+                    "borderColor": "#666"
+                }
+            }
+        },
+        "legend": {
+            "textStyle": {
+                "color": "#6e9fcc"
+            }
+        },
+        "tooltip": {
+            "axisPointer": {
+                "lineStyle": {
+                    "color": "#ccc",
+                    "width": 1
+                },
+                "crossStyle": {
+                    "color": "#ccc",
+                    "width": 1
+                }
+            }
+        },
+        "timeline": {
+            "lineStyle": {
+                "color": "#609cd1",
+                "width": 1
+            },
+            "itemStyle": {
+                "normal": {
+                    "color": "#ff9e9e",
+                    "borderWidth": 1
+                },
+                "emphasis": {
+                    "color": "#ff99ae"
+                }
+            },
+            "controlStyle": {
+                "normal": {
+                    "color": "#abcdff",
+                    "borderColor": "#5987c9",
+                    "borderWidth": 0.5
+                },
+                "emphasis": {
+                    "color": "#abcdff",
+                    "borderColor": "#5987c9",
+                    "borderWidth": 0.5
+                }
+            },
+            "checkpointStyle": {
+                "color": "#e43c59",
+                "borderColor": "rgba(194,53,49, 0.5)"
+            },
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#609cd1"
+                    }
+                },
+                "emphasis": {
+                    "textStyle": {
+                        "color": "#609cd1"
+                    }
+                }
+            }
+        },
+        "visualMap": {
+            "color": [
+                "#bf444c",
+                "#d88273",
+                "#f6efa6"
+            ]
+        },
+        "dataZoom": {
+            "backgroundColor": "rgba(47,69,84,0)",
+            "dataBackgroundColor": "rgba(47,69,84,0.3)",
+            "fillerColor": "rgba(167,183,204,0.4)",
+            "handleColor": "#a7b7cc",
+            "handleSize": "100%",
+            "textStyle": {
+                "color": "#ffffff"
+            }
+        },
+        "markPoint": {
+            "label": {
+                "normal": {
+                    "textStyle": {
+                        "color": "#eee"
+                    }
+                },
+                "emphasis": {
+                    "textStyle": {
+                        "color": "#eee"
+                    }
+                }
+            }
+        }
+    });
+}));

kanban-client/app/src/Charts/Theme/dark.js

@@ -54,7 +54,7 @@
     var colorPalette = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'];
     var theme = {
         color: colorPalette,
-        backgroundColor: '#2f2e2c',
+        backgroundColor: '#transparent',
         tooltip: {
             axisPointer: {
                 lineStyle: {