support jupyter and dashboard up or load

README.md

@@ -206,6 +206,7 @@ pip install smartchart
 ```shell script
 2020/12/14  静态资源本地化
 v3.9.8.2    支持所有常见数据库,支持VUE,DATAV
+v3.9.8.3    支持Jupyter,支持一键分享和应用dashboard模板
 
 ```
 
@@ -222,4 +223,4 @@ v3.9.8.2    支持所有常见数据库,支持VUE,DATAV
 - 但如果要使用好smart chart, 建意了解下javascript, H5, Echarts这些前端知识, 可以让你的应用更加得心应手,创作更炫的效果
 - 如果你需要更进一步订制你的数据, 你需要了解下SQL的使用,本项目高级应用语言都是通用的技能, 象js, h5,sql 学习成本低
 
-- [SmartChart入门文档入口, 以视屏为准](https://www.smartchart.cn/blog/article/2019/12/14/33.html "SmartChart入门")
+- [SmartChart入门文档入口, 以视屏为准](https://www.smartchart.cn/blog/article/2019/6/1/3.html "SmartChart入门")

static/echart/theme/macarons21912212209.js

@@ -0,0 +1,232 @@
+(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;
+    }
+
+    var colorPalette = [
+        '#ed9678',
+        '#e7dac9',
+        '#cb8e85',
+        '#f3f39d',
+        '#c8e49c',
+        '#f16d7a',
+        '#f3d999',
+        '#d3758f',
+        '#dcc392',
+        '#2e4783',
+        '#82b6e9',
+        '#ff6347',
+        '#a092f1',
+        '#0a915d',
+        '#eaf889',
+        '#6699FF',
+        '#ff6666',
+        '#3cb371',
+        '#d5b158',
+        '#38b6b6'
+    ];
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                color: '#cb8e85'
+            }
+        },
+
+        dataRange: {
+            color: ['#cb8e85', '#e7dac9'], //颜色
+            //text:['高','低'],         // 文本，默认为数值文本
+            textStyle: {
+                color: '#333' // 值域文字颜色
+            }
+        },
+
+        bar: {
+            barMinHeight: 0, // 最小高度改为0
+            // barWidth: null,        // 默认自适应
+            barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值
+            barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
+            itemStyle: {
+                normal: {
+                    // color: '各异',
+                    barBorderColor: '#fff', // 柱条边线
+                    barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
+                    barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
+                    label: {
+                        show: false
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    }
+                },
+                emphasis: {
+                    // color: '各异',
+                    barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
+                    barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
+                    barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
+                    label: {
+                        show: false
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    }
+                }
+            }
+        },
+
+        line: {
+            itemStyle: {
+                normal: {
+                    // color: 各异,
+                    label: {
+                        show: false
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    },
+                    lineStyle: {
+                        width: 2,
+                        type: 'solid',
+                        shadowColor: 'rgba(0,0,0,0)', //默认透明
+                        shadowBlur: 5,
+                        shadowOffsetX: 3,
+                        shadowOffsetY: 3
+                    }
+                },
+                emphasis: {
+                    // color: 各异,
+                    label: {
+                        show: false
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    }
+                }
+            },
+            //smooth : false,
+            //symbol: null,         // 拐点图形类型
+            symbolSize: 2, // 拐点图形大小
+            //symbolRotate : null,  // 拐点图形旋转控制
+            showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
+        },
+
+        candlestick: {
+            itemStyle: {
+                color: '#fe9778',
+                color0: '#e7dac9'
+            },
+            lineStyle: {
+                width: 1,
+                color: '#f78766',
+                color0: '#f1ccb8'
+            },
+            areaStyle: {
+                color: '#e7dac9',
+                color0: '#c8e49c'
+            }
+        },
+
+        // 饼图默认参数
+        pie: {
+            center: ['50%', '50%'], // 默认全局居中
+            radius: [0, '75%'],
+            clockWise: false, // 默认逆时针
+            startAngle: 90,
+            minAngle: 0, // 最小角度改为0
+            selectedOffset: 10, // 选中是扇区偏移量
+            itemStyle: {
+                normal: {
+                    // color: 各异,
+                    borderColor: '#fff',
+                    borderWidth: 1,
+                    label: {
+                        show: true,
+                        position: 'outer',
+                        textStyle: { color: '#1b1b1b' },
+                        lineStyle: { color: '#1b1b1b' }
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    },
+                    labelLine: {
+                        show: true,
+                        length: 20,
+                        lineStyle: {
+                            // color: 各异,
+                            width: 1,
+                            type: 'solid'
+                        }
+                    }
+                }
+            }
+        },
+
+        map: {
+            itemStyle: {
+                color: '#ddd',
+                borderColor: '#fff',
+                borderWidth: 1
+            },
+            areaStyle: {
+                color: '#f3f39d'
+            },
+            label: {
+                show: false,
+                color: 'rgba(139,69,19,1)'
+            },
+            showLegendSymbol: true
+        },
+
+        graph: {
+            itemStyle: {
+                color: '#d87a80'
+            },
+            linkStyle: {
+                strokeColor: '#a17e6e'
+            },
+            nodeStyle: {
+                brushType: 'both',
+                strokeColor: '#a17e6e'
+            },
+            label: {
+                show: false
+            }
+        },
+
+        gauge: {
+            axisLine: {
+                lineStyle: {
+                    color: [
+                        [0.2, '#ed9678'],
+                        [0.8, '#e7dac9'],
+                        [1, '#cb8e85']
+                    ],
+                    width: 8
+                }
+            }
+        }
+    };
+
+    echarts.registerTheme('macarons2', theme);
+});

static/index/input.css

@@ -0,0 +1,140 @@
+ *,
+:before,
+:after {
+    box-sizing: border-box;
+}
+body {
+    background: #424242;
+}
+form {
+    width: 320px;
+    margin: 45px auto;
+}
+form h1 {
+    font-size: 3em;
+    font-weight: 300;
+    text-align: center;
+    color: #2196F3;
+}
+form h5 {
+    text-align: center;
+    text-transform: uppercase;
+    color: #c6c6c6;
+}
+form hr.sep {
+    background: #2196F3;
+    box-shadow: none;
+    border: none;
+    height: 2px;
+    width: 25%;
+    margin: 70px auto 45px auto;
+}
+.group {
+    position: relative;
+    margin: 45px 0;
+}
+textarea {
+    resize: none;
+}
+input,
+textarea {
+    background: none;
+    color: #c6c6c6;
+    font-size: 18px;
+    padding: 10px 10px 10px 5px;
+    display: block;
+    width: 320px;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid #c6c6c6;
+}
+input:focus,
+textarea:focus {
+    outline: none;
+}
+input:focus ~ label,
+input:valid ~ label,
+textarea:focus ~ label,
+textarea:valid ~ label {
+    top: -14px;
+    font-size: 12px;
+    color: #2196F3;
+}
+input:focus ~ .bar:before,
+textarea:focus ~ .bar:before {
+    width: 320px;
+}
+input[type="password"] {
+    letter-spacing: 0.3em;
+}
+label {
+    color: #c6c6c6;
+    font-size: 16px;
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 10px;
+    -webkit-transition: 300ms ease all;
+    transition: 300ms ease all;
+}
+.bar {
+    position: relative;
+    display: block;
+    width: 320px;
+}
+.bar:before {
+    content: '';
+    height: 2px;
+    width: 0;
+    bottom: 0px;
+    position: absolute;
+    background: #2196F3;
+    -webkit-transition: 300ms ease all;
+    transition: 300ms ease all;
+    left: 0%;
+}
+.btn {
+    background: #fff;
+    color: #959595;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 3px;
+    text-transform: uppercase;
+    text-decoration: none;
+    outline: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.btn:hover {
+    color: #8b8b8b;
+    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
+}
+.btn.btn-link {
+    background: #2196F3;
+    color: #d3eafd;
+}
+.btn.btn-link:hover {
+    background: #0d8aee;
+    color: #deeffd;
+}
+.btn.btn-submit {
+    background: #2196F3;
+    color: #bce0fb;
+}
+.btn.btn-submit:hover {
+    background: #0d8aee;
+    color: #deeffd;
+}
+.btn.btn-cancel {
+    background: #eee;
+}
+.btn.btn-cancel:hover {
+    background: #e1e1e1;
+    color: #8b8b8b;
+}
+.btn-box {
+    text-align: center;
+    margin: 50px 0;
+}

templates/echart/403.html

@@ -2,24 +2,40 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
 <title>你需要激活</title>
 <meta name="keywords" content="你需要激活" />
+</head>
+ <link rel="stylesheet" media="all" href="/static/index/input.css">
 </head>
 <body>
-<h4>为方便大家交流使用问题, 所以强制要求加微信获取激活码, 请放心不需要费用</h4>
-<div><img src="https://www.smartchart.cn/static/images/auth.png" height="200px"></div>
-<div><input id="authkey" placeholder="请输入你的KEY"><button onclick="get_auth()">激活</button></div>
-<p><small><a href="https://www.smartchart.cn">@smartchart.cn</a> </small></p>
-<div><span id="authcontent"></span></div>
+<div class="wrapper">
+    <form>
+        <h1>SmartChart</h1>
+        <h5 id="msg">为方便交流,需加微信或群获取激活码,请支持一杯咖啡</h5>
+        <h5><img src="https://www.smartchart.cn/static/images/auth.png" height="150px"></h5>
+        <div class="group">
+            <input id="authkey" placeholder="请输入你的KEY" required="required" /><span class="highlight"></span><span class="bar"></span>
+        </div>
+    </form>
+        <div class="btn-box">
+            <a id='submitup' class="btn btn-submit">激活</a>
+            <a type="button" href="https://qm.qq.com/cgi-bin/qm/qr?k=eC34KwVvEtMvfh8Zyn1RSfYlzZvuvm7i&jump_from=webapi" class="btn btn-cancel">加Q群</a>
+            <h5><a href="https://www.smartchart.cn">@smartchart.cn</a></h5>
+        </div>
+</div>
+
 <script src="/static/js/jquery-2.2.3.min.js"></script>
 <script>
-function get_auth() {
-    let key = $('#authkey').val();
+$("#submitup").click(function(){
+    let key = $.trim($('#authkey').val());
+    if(key === ''){
+        $('#msg').html('请输入KEY');
+        return;
+    }
     $.ajax({type: "POST",url: '/echart/auth_right/', data:{key: key} ,success: function (data)
-    { $('#authcontent').html(data['msg']);
+    { $('#msg').html(data['msg']);
 } });
-}
+});
 </script>
 
 

templates/echart/dataset.html

@@ -0,0 +1,17 @@
+{% extends "echart/base.html" %}
+{% block head %}{% endblock %}
+{% block style %}{% endblock %}
+{% block stylesheet %}{% endblock %}
+{% block body %}
+<body>
+
+<div class="container_fluid">
+<div class="row_fluid" id="vue_app">
+    {% for div in div_list %}
+      {{div|safe}}
+    {% endfor %}    
+</div>
+</div>
+</body>
+{% endblock %}
+{% block javascript %}{% endblock %}

templates/echart/updashboard.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>SmartChartConnect</title>
+    <link rel="stylesheet" media="all" href="/static/index/input.css">
+</head>
+<body>
+<div class="wrapper">
+    <form>
+        <h1>SmartChart Dashboard</h1>
+        <h5 id="msg"></h5>
+        <div class="group">
+            <input id='id_title' placeholder="input the token" required="required" /><span class="highlight"></span><span class="bar"></span>
+        </div>
+<!--     <div class="group">
+            <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
+            <label>Email</label>
+        </div>
+        <div class="group">
+            <input type="password" required="required" /><span class="highlight"></span><span class="bar"></span>
+            <label>Password</label>
+        </div>
+        <div class="group">
+            <textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
+            <label>Message</label>
+        </div> -->
+    </form>
+        <div class="btn-box">
+            <button id='submitup'  class="btn btn-submit">{{ action }}</button>
+            <button type="button" class="btn btn-cancel">cancel</button>
+            <h5>smartchart.cn</h5>
+        </div>
+</div></body>
+</html>
+
+<script src="/static/js/jquery-2.2.3.min.js"></script>
+
+<script>
+    var status = 0
+    $("#submitup").click(function(){
+        if(status===1){$('#msg').html('已提交, 不要重复点击');return}
+    let title = $.trim($("#id_title").val());
+			if(title == ""){
+				document.getElementById("msg").innerHTML="Pls input your keywords";
+				return;
+			}
+			status=1
+			$.ajax({
+            type: "POST",
+            url: "/echart/dash_connect/",
+            data: {id: {{id}}, a: '{{ action }}', 'key': title},
+            success: function (data) {
+                $('#msg').html(data['msg']);status=0;
+            }
+        });
+		});
+</script>

templates/source/no_favorite

@@ -2,24 +2,40 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
 <title>你需要激活</title>
 <meta name="keywords" content="你需要激活" />
+</head>
+ <link rel="stylesheet" media="all" href="/static/index/input.css">
 </head>
 <body>
-<h4>为方便大家交流使用问题, 所以强制要求加微信获取激活码, 请放心不需要费用</h4>
-<div><img src="https://www.smartchart.cn/static/images/auth.png" height="200px"></div>
-<div><input id="authkey" placeholder="请输入你的KEY"><button onclick="get_auth()">激活</button></div>
-<p><small><a href="https://www.smartchart.cn">@smartchart.cn</a> </small></p>
-<div><span id="authcontent"></span></div>
+<div class="wrapper">
+    <form>
+        <h1>SmartChart</h1>
+        <h5 id="msg">为方便交流,需加微信或群获取激活码,请支持一杯咖啡</h5>
+        <h5><img src="https://www.smartchart.cn/static/images/auth.png" height="150px"></h5>
+        <div class="group">
+            <input id="authkey" placeholder="请输入你的KEY" required="required" /><span class="highlight"></span><span class="bar"></span>
+        </div>
+    </form>
+        <div class="btn-box">
+            <a id='submitup' class="btn btn-submit">激活</a>
+            <a type="button" href="https://qm.qq.com/cgi-bin/qm/qr?k=eC34KwVvEtMvfh8Zyn1RSfYlzZvuvm7i&jump_from=webapi" class="btn btn-cancel">加Q群</a>
+            <h5><a href="https://www.smartchart.cn">@smartchart.cn</a></h5>
+        </div>
+</div>
+
 <script src="/static/js/jquery-2.2.3.min.js"></script>
 <script>
-function get_auth() {
-    let key = $('#authkey').val();
+$("#submitup").click(function(){
+    let key = $.trim($('#authkey').val());
+    if(key === ''){
+        $('#msg').html('请输入KEY');
+        return;
+    }
     $.ajax({type: "POST",url: '/echart/auth_right/', data:{key: key} ,success: function (data)
-    { $('#authcontent').html(data['msg']);
+    { $('#msg').html(data['msg']);
 } });
-}
+});
 </script>