一鍵生成BizCharts圖表代碼的Sketch插件

時間 2019-11-22

標籤一鍵生成 bizcharts 圖表代碼 sketch 插件简体版

原文原文鏈接

Charts Tool

因爲業務須要，上個月跟一個小夥伴一塊兒作了一個圖表工具, 是時候寫一篇軟文推廣一波了。 Charts Tool如今已經開源了，歡迎你們多多提意見。

主要是參考Kitchen一款爲設計者提高工做效率的 Sketch 工具集,我在他的基礎上豐富了本身想要的功能。javascript

大綱

爲何我想作這個圖表工具
使用場景
所使用的技術棧
功能點
難點
目前遺留問題
功能迭代計劃
參考

爲何我想作這個圖表工具

1.懶

我是以爲程序員要學會「偷懶」，偷懶的含義是怎麼樣不讓本身作大量重複性的勞動,如何利用等量的時間去創造更大的價值。在剩餘的時間提高本身的技術能力。

以前作可視化大屏項目的時候，首先你要通讀一遍圖表開發文檔。並且常常要查api，在作的過程當中很煩。因而我就想作一個一勞永逸的事情，本身寫一個生成圖表的工具，無需看開發文檔。直接經過Charts Tool編輯圖表屬性生成相對應的圖表及代碼。前端

2.少

市面上不多有這種生成圖表的工具。即便有，對於開發來講，自動生成代碼纔是咱們這等coder所須要的。

還有什麼了？？？你們能夠腦補，我再補充java

預留坑位，給各位要吐槽的大佬，哈哈哈react

使用場景

作設計的同窗，遇到圖表也是千方百計的想要展現本身的美感。那給你定製化一套圖表，你就能夠省去這些煩惱。git

前端開發的同窗

只須要編輯圖表就能生成代碼，你不想要嗎？程序員

製做數據報表的那些人

填寫數據，編輯圖表，生成圖表，而後再粘貼到你的ppt上是否是會很輕鬆github

如今以上場景均已實現web

所使用的技術棧

react + antd + BizCharts + umi
Sketch webView

功能點

查看圖表，編輯圖表數據
編輯樣式及圖表屬性，查看歷史記錄
應用歷史記錄，生成svg展現在sketch中

難點

如何將web中生成的BizCharts圖表插入到sketch 中,經過 Sketch webview開發能夠實現sketch webview與 web項目之間的通訊
SVG-Insert 將web生成的svg dom 轉成 sketch圖層，應用在sketch中進行編輯。

##################核心代碼

## web
 /* 下方代碼爲生成svg，展現在sketch中 */
        const { title, subTitle } = chartConfig
        const { group, type } = chartRoute
        const { subTitle: layerTitle } = getMenuInfoFromRoute(group, type);
        const targetSvg = getSvgCodeFromEle(document.getElementsByTagName('svg'));
        console.log(targetSvg);
        window.postMessage(
            'JsBridge_InsertSvg',
            JSON.stringify({
                layerTitle,
                svg: targetSvg,
                config: {
                    title,
                    subTitle,
                },
            }),
        );
複製代碼

## sketch webview
 // add a handler for a call from web content's javascript webContents.on('JsBridge_InsertSvg', data => { const json = JSON.parse(data); const { svg, config, layerTitle } = json; SvgInsert(context, json, webContents); browserWindow.close(); }); 複製代碼

生成的圖表數據與屬性和原始圖表的合併

## web index.js
const getFullChartConfig = () => {
        const result = merge({}, chartData[group][type], chartFormatUtils[group][type](chartConfig));
        return result;
};
複製代碼

注意若是要生成svg dom，圖表必需是支持svg渲染的。BizCharts能夠支持canvas和svg渲染的。json

目前遺留問題

BizCharts 數據transform的反向應用生成代碼的時候，如今只考慮解析一層，若是圖表比較複雜，須要額外維護。

################# ReactFromJson index.js
## transform爲一個對象
  return `
    import React from 'react';
    import { Chart, Geom, Axis, Tooltip, Coord, Legend, Label, Guide } from 'bizcharts';
    ${transform ? `import DataSet from '@antv/data-set';` : ''}

    const { Html } = Guide;

    export default () => {

      const data = ${JSON.stringify(data)}
      ${transform
      ? `const { DataView } = DataSet;
        const dv = new DataView();
        dv.source(data).transform(${JSON.stringify(transform)});
    ` : ''}
      return (
        <Chart ${getPropsFromJson(ChartProps)} data=${transform ? `{dv}` : '{data}'}>
          ${XAxisProps ? `<Axis ${getPropsFromJson(XAxisProps)} />` : ''}
          ${YAxisProps ? `<Axis ${getPropsFromJson(YAxisProps)} />` : ''}
          ${TooltipProps ? `<Tooltip ${getPropsFromJson(TooltipProps)} />` : ''}
          ${Array.isArray(GeomProps) ? GeomProps.map(item => `<Geom ${getPropsFromJson(item)} />`) : `<Geom ${getPropsFromJson(GeomProps)}>${LabelProps ? `<Label ${getPropsFromJson(LabelProps)} />` : ''}</Geom>`}
          ${CoordProps ? `<Coord ${getPropsFromJson(CoordProps)} />` : ''}
          ${LegendProps ? `<Legend ${getPropsFromJson(LegendProps)} />` : ''}
          ${GuideProps ? `<Guide ${getPropsFromJson(GuideProps)}>${HtmlProps ? `<Html ${getPropsFromJson(HtmlProps)} />` : ''}</Guide>` : ''}
        </Chart>
      );
    };
  `;
複製代碼