├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── demo ├── chart │ ├── area-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── area-2 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── area-3 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── area-4 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── area-5 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-2 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-3 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-4 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-5 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-6 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── bar-7 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── guide-line-text │ │ └── react.tsx │ ├── index.js │ ├── line-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── line-2 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── line-3 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── line-4 │ │ ├── json.js │ │ └── react.tsx │ ├── pie-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── pie-2 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── pie-click │ │ ├── json.js │ │ └── react.tsx │ ├── pie-labelline │ │ ├── json.js │ │ └── react.tsx │ ├── pie-with-label │ │ ├── json.js │ │ └── react.tsx │ ├── point-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ ├── point-2 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx │ └── radar-1 │ │ ├── data.js │ │ ├── json.js │ │ └── react.tsx ├── config │ ├── dev.env.js │ └── index.js ├── iframe.css ├── iframe.html ├── iframe.ts ├── index.css ├── index.html ├── index.ts ├── package.json ├── run.js ├── tsconfig.json ├── utils.js └── webpack.config.js ├── lerna.json ├── package.json └── packages ├── bizgoblin ├── .babelrc.js ├── README.md ├── lib │ ├── components │ │ ├── Chart.js │ │ └── SubComponent.js │ ├── index.js │ ├── plugin │ │ └── PieLabel.js │ └── typed │ │ └── IRChart.js ├── package.json ├── src │ ├── components │ │ ├── Chart.tsx │ │ └── SubComponent.tsx │ ├── index.tsx │ ├── plugin │ │ └── PieLabel.tsx │ └── typed │ │ └── IRChart.ts ├── tsconfig.json ├── tslint.json └── webpack.config.js └── goblin ├── .babelrc.js ├── README.md ├── lib ├── components │ ├── setAnimateConfig.js │ ├── setAxisConfig.js │ ├── setCoordConfig.js │ ├── setDataConfig.js │ ├── setGuideConfig.js │ ├── setLegendConfig.js │ ├── setPieLabelConfig.js │ ├── setSeriesConfig.js │ └── setTooltipConfig.js ├── core │ └── CommonChart.js ├── index.js ├── plugin │ └── pieLabel.js ├── typed │ ├── IAnimate.js │ ├── IAxis.js │ ├── IChart.js │ ├── ICommon.js │ ├── ICoord.js │ ├── IDefs.js │ ├── IGuide.js │ ├── ILegend.js │ ├── IMain.js │ ├── IPieLabel.js │ ├── ISeries.js │ └── ITooltip.js └── utils │ └── Commom.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── setAnimateConfig.ts │ ├── setAxisConfig.ts │ ├── setCoordConfig.ts │ ├── setDataConfig.ts │ ├── setGuideConfig.ts │ ├── setLegendConfig.ts │ ├── setPieLabelConfig.ts │ ├── setSeriesConfig.ts │ └── setTooltipConfig.ts ├── core │ └── CommonChart.ts ├── index.ts ├── plugin │ └── pieLabel.ts ├── typed │ ├── IAnimate.ts │ ├── IAxis.ts │ ├── IChart.ts │ ├── ICommon.ts │ ├── ICoord.ts │ ├── IDefs.ts │ ├── IGuide.ts │ ├── ILegend.ts │ ├── IMain.ts │ ├── IPieLabel.ts │ ├── ISeries.ts │ └── ITooltip.ts └── utils │ └── Commom.ts ├── tsconfig.json ├── tslint.json └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain 2 | # consistent coding styles between different editors and IDEs. 3 | 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | packages/**/build 5 | packages/**/umd 6 | packages/**/es 7 | demo/**/*/umd 8 | coverage 9 | npm-debug.log 10 | *.orig 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 0.1.0 2 | 3 | #### -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Alibaba 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Document 2 | 3 | [API](http://bizcharts.net/products/bizGoblin/api/chart) 4 | 5 | 6 | ## Installation 7 | 8 | #### npm 9 | 10 | The NPM way is only install by shell: 11 | 12 | ```shell 13 | # latest stable 14 | $ npm install goblin-base 15 | ``` 16 | 17 | ### React Version 18 | 19 | In react version, You mush repare react version greater then **15**, and support **16** certainly. 20 | 21 | #### npm 22 | 23 | The NPM way is only install by shell: 24 | 25 | ```shell 26 | # latest stable 27 | $ npm install bizgoblin 28 | ``` 29 | 30 | ## Demo 31 | 32 | To examine the demos in your local build, open to `demo` directory, and execute 33 | 34 | ```shell 35 | $ npm run postinstall 36 | $ cd ./demo && npm install 37 | $ npm run start 38 | ``` 39 | 40 | and then browse to http://localhost:3000 41 | 42 | ## License 43 | 44 | MIT -------------------------------------------------------------------------------- /demo/chart/area-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | time: 'Jan.', 4 | tem: 1000 5 | }, { 6 | time: 'Feb.', 7 | tem: 2200 8 | }, { 9 | time: 'Mar.', 10 | tem: 2000 11 | }, { 12 | time: 'Apr.', 13 | tem: 2600 14 | }, { 15 | time: 'May.', 16 | tem: 2000 17 | }, { 18 | time: 'Jun.', 19 | tem: 2600 20 | }, { 21 | time: 'Jul.', 22 | tem: 2800 23 | }, { 24 | time: 'Aug.', 25 | tem: 2000 26 | } 27 | ]; 28 | 29 | export const defs = [ 30 | { 31 | dataKey: 'time', 32 | range: [0, 1] 33 | }, { 34 | dataKey: 'tem', 35 | tickCount: 5, 36 | min: 0 37 | } 38 | ]; 39 | -------------------------------------------------------------------------------- /demo/chart/area-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'time', 9 | label: function label(text, index, total) { 10 | var textCfg = {}; 11 | if (index === 0) { 12 | textCfg.textAlign = 'left'; 13 | } else if (index === total - 1) { 14 | textCfg.textAlign = 'right'; 15 | } 16 | return textCfg; 17 | } 18 | }], 19 | tooltip: { 20 | showCrosshairs: true 21 | }, 22 | series: [{ 23 | geom: 'area', 24 | position: 'time*tem' 25 | }, { 26 | geom: 'line', 27 | position: 'time*tem' 28 | }], 29 | chart: { 30 | id: 'mountNode', 31 | // width: 375, 32 | height:240, 33 | pixelRatio: window.devicePixelRatio*2 34 | } 35 | }); 36 | -------------------------------------------------------------------------------- /demo/chart/area-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | class App extends React.Component<{data?: Array}> { 17 | state = { 18 | height:240, 19 | width: '100%', 20 | pixelRatio: window.devicePixelRatio*2 21 | } 22 | 23 | constructor(props) { 24 | super(props); 25 | } 26 | 27 | render() { 28 | const { height, width, pixelRatio } = this.state; 29 | return ( 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | ); 40 | } 41 | } 42 | 43 | ReactDOM.render(, document.getElementById('mount')); -------------------------------------------------------------------------------- /demo/chart/area-2/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { month: 12, tem: 7, city: 'tokyo' }, 3 | { month: 1, tem: 6.9, city: 'tokyo' }, 4 | { month: 2, tem: 9.5, city: 'tokyo' }, 5 | { month: 3, tem: 14.5, city: 'tokyo' }, 6 | { month: 4, tem: 18.2, city: 'tokyo' }, 7 | { month: 5, tem: 21.5, city: 'tokyo' }, 8 | { month: 6, tem: 25.2, city: 'tokyo' }, 9 | { month: 7, tem: 26.5, city: 'tokyo' }, 10 | { month: 8, tem: 23.3, city: 'tokyo' }, 11 | { month: 9, tem: 18.3, city: 'tokyo' }, 12 | { month: 10, tem: 13.9, city: 'tokyo' }, 13 | { month: 11, tem: 9.6, city: 'tokyo' }, 14 | { month: 12, tem: 0, city: 'newYork' }, 15 | { month: 1, tem: 0.8, city: 'newYork' }, 16 | { month: 2, tem: 5.7, city: 'newYork' }, 17 | { month: 3, tem: 11.3, city: 'newYork' }, 18 | { month: 4, tem: 17, city: 'newYork' }, 19 | { month: 5, tem: 22, city: 'newYork' }, 20 | { month: 6, tem: 24.8, city: 'newYork' }, 21 | { month: 7, tem: 24.1, city: 'newYork' }, 22 | { month: 8, tem: 20.1, city: 'newYork' }, 23 | { month: 9, tem: 14.1, city: 'newYork' }, 24 | { month: 10, tem: 8.6, city: 'newYork' }, 25 | { month: 11, tem: 2.5, city: 'newYork' }, 26 | { month: 12, tem: 2, city: 'berlin' }, 27 | { month: 1, tem: 0.6, city: 'berlin' }, 28 | { month: 2, tem: 3.5, city: 'berlin' }, 29 | { month: 3, tem: 8.4, city: 'berlin' }, 30 | { month: 4, tem: 13.5, city: 'berlin' }, 31 | { month: 5, tem: 17, city: 'berlin' }, 32 | { month: 6, tem: 18.6, city: 'berlin' }, 33 | { month: 7, tem: 17.9, city: 'berlin' }, 34 | { month: 8, tem: 14.3, city: 'berlin' }, 35 | { month: 9, tem: 9, city: 'berlin' }, 36 | { month: 10, tem: 3.9, city: 'berlin' }, 37 | { month: 11, tem: 1, city: 'berlin' } 38 | ]; 39 | 40 | export const defs = [{ 41 | dataKey: 'month', 42 | tickCount: 12 43 | }, { 44 | dataKey: 'tem', 45 | tickCount: 5 46 | }]; 47 | -------------------------------------------------------------------------------- /demo/chart/area-2/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'month', 9 | label: { 10 | fontSize:12 11 | } 12 | }, { 13 | dataKey: 'tem', 14 | label: { 15 | fontSize:12 16 | } 17 | }], 18 | legend: true, 19 | tooltip: { 20 | showCrosshairs: true, 21 | custom: true, 22 | onChange: function onChange(obj, chart) { 23 | var legend = chart.get('legendController').legends.top[0]; 24 | var tooltipItems = obj.items; 25 | var legendItems = legend.items; 26 | var map = {}; 27 | legendItems.map(function(item) { 28 | map[item.name] = JSON.parse(JSON.stringify(item)); 29 | }); 30 | tooltipItems.map(function(item) { 31 | var name = item.name; 32 | var value = item.value; 33 | if (map[name]) { 34 | map[name].value = value; 35 | } 36 | }); 37 | legend.setItems(Object.values(map)); 38 | }, 39 | onHide: function onHide(obj, chart) { 40 | var legend = chart.get('legendController').legends.top[0]; 41 | legend.setItems(chart.getLegendItems().country); 42 | } 43 | }, 44 | series: [{ 45 | geom: 'area', 46 | position: 'month*tem', 47 | color: 'city', 48 | shape: 'smooth', 49 | style: { 50 | opacity: 0.6 51 | }, 52 | adjust: 'stack' 53 | }, { 54 | geom: 'line', 55 | position: 'month*tem', 56 | color: 'city', 57 | shape: 'smooth', 58 | adjust: 'stack' 59 | }], 60 | chart: { 61 | id: 'mountNode', 62 | width: 375, 63 | height:240, 64 | pixelRatio: window.devicePixelRatio*2 65 | } 66 | }); -------------------------------------------------------------------------------- /demo/chart/area-2/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { defs, data } from './data' 5 | 6 | function onChangeTooltip (obj, chart) { 7 | var legend = chart.get('legendController').legends.top[0]; 8 | var tooltipItems = obj.items; 9 | var legendItems = legend.items; 10 | var map = {}; 11 | legendItems.map(function(item) { 12 | map[item.name] = JSON.parse(JSON.stringify(item)); 13 | }); 14 | tooltipItems.map(function(item) { 15 | var name = item.name; 16 | var value = item.value; 17 | if (map[name]) { 18 | map[name].value = value; 19 | } 20 | }); 21 | legend.setItems(Object.keys(map).map(key => map[key])); 22 | } 23 | 24 | function onHideTooltip (obj, chart) { 25 | const legend = chart.get('legendController').legends.top[0]; 26 | legend.setItems(chart.getLegendItems().city); 27 | } 28 | 29 | class App extends React.Component<{data?: Array}> { 30 | state = { 31 | height:240, 32 | width: 375, 33 | pixelRatio: window.devicePixelRatio*2 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | ); 54 | } 55 | } 56 | 57 | 58 | ReactDOM.render(, document.getElementById('mount')); 59 | -------------------------------------------------------------------------------- /demo/chart/area-3/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | month: 'Jan.', 4 | value: 6.06 5 | }, { 6 | month: 'Feb.', 7 | value: 82.2 8 | }, { 9 | month: 'Mar.', 10 | value: -22.11 11 | }, { 12 | month: 'Apr.', 13 | value: 21.53 14 | }, { 15 | month: 'May.', 16 | value: -21.74 17 | }, { 18 | month: 'Jun.', 19 | value: 73.61 20 | }, { 21 | month: 'Jul.', 22 | value: 53.75 23 | }, { 24 | month: 'Aug.', 25 | value: 60.32 26 | } 27 | ]; 28 | 29 | export const defs = [ 30 | { 31 | dataKey: 'month', 32 | range: [0, 1] 33 | }, { 34 | dataKey: 'value', 35 | nice: false, 36 | min: -100, 37 | max: 100, 38 | tickCount: 5 39 | } 40 | ] -------------------------------------------------------------------------------- /demo/chart/area-3/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'month', 9 | line: null, 10 | label: function (text, index, total) { 11 | const textCfg = {}; 12 | if (index === 0) { 13 | textCfg.textAlign = 'left'; 14 | } else if (index === total - 1) { 15 | textCfg.textAlign = 'right'; 16 | } 17 | return textCfg; 18 | } 19 | }, { 20 | dataKey: 'value', 21 | grid: function (text) { 22 | if (text === '0') { 23 | return { 24 | lineDash: null, 25 | lineWidth: 1 26 | }; 27 | } 28 | } 29 | }], 30 | tooltip: { 31 | showCrosshairs: true 32 | }, 33 | series: [{ 34 | geom: 'area', 35 | position: 'month*value' 36 | }, { 37 | geom: 'line', 38 | position: 'month*value' 39 | }], 40 | chart: { 41 | id: 'mountNode', 42 | width: 375, 43 | height:240, 44 | pixelRatio: window.devicePixelRatio*2 45 | } 46 | }); -------------------------------------------------------------------------------- /demo/chart/area-3/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function formatGrid (text) { 17 | if (text === '0') { 18 | return { 19 | lineDash: null, 20 | lineWidth: 1 21 | } 22 | } 23 | } 24 | 25 | class App extends React.Component<{data?: Array}> { 26 | state = { 27 | height:240, 28 | width: 375, 29 | pixelRatio: window.devicePixelRatio*2 30 | } 31 | 32 | static defaultProps = { 33 | data: [] 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | } 53 | 54 | ReactDOM.render(, document.getElementById('mount')); 55 | -------------------------------------------------------------------------------- /demo/chart/area-4/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | year: "1986", 4 | type: "ACME", 5 | value: 162 6 | }, 7 | { 8 | year: "1986", 9 | type: "Compitor", 10 | value: 42 11 | }, 12 | { 13 | year: "1987", 14 | type: "ACME", 15 | value: 134 16 | }, 17 | { 18 | year: "1987", 19 | type: "Compitor", 20 | value: 54 21 | }, 22 | { 23 | year: "1988", 24 | type: "ACME", 25 | value: 116 26 | }, 27 | { 28 | year: "1988", 29 | type: "Compitor", 30 | value: 26 31 | }, 32 | { 33 | year: "1989", 34 | type: "ACME", 35 | value: 122 36 | }, 37 | { 38 | year: "1989", 39 | type: "Compitor", 40 | value: 32 41 | }, 42 | { 43 | year: "1990", 44 | type: "ACME", 45 | value: 178 46 | }, 47 | { 48 | year: "1990", 49 | type: "Compitor", 50 | value: 68 51 | }, 52 | { 53 | year: "1991", 54 | type: "ACME", 55 | value: 144 56 | }, 57 | { 58 | year: "1991", 59 | type: "Compitor", 60 | value: 54 61 | }, 62 | { 63 | year: "1992", 64 | type: "ACME", 65 | value: 125 66 | }, 67 | { 68 | year: "1992", 69 | type: "Compitor", 70 | value: 35 71 | }, 72 | { 73 | year: "1993", 74 | type: "ACME", 75 | value: 176 76 | }, 77 | { 78 | year: "1993", 79 | type: "Compitor", 80 | value: 66 81 | }, 82 | { 83 | year: "1994", 84 | type: "ACME", 85 | value: 156 86 | }, 87 | { 88 | year: "1994", 89 | type: "Compitor" 90 | }, 91 | { 92 | year: "1995", 93 | type: "ACME", 94 | value: 195 95 | }, 96 | { 97 | year: "1995", 98 | type: "Compitor" 99 | }, 100 | { 101 | year: "1996", 102 | type: "ACME", 103 | value: 215 104 | }, 105 | { 106 | year: "1996", 107 | type: "Compitor" 108 | }, 109 | { 110 | year: "1997", 111 | type: "ACME", 112 | value: 176 113 | }, 114 | { 115 | year: "1997", 116 | type: "Compitor", 117 | value: 36 118 | }, 119 | { 120 | year: "1998", 121 | type: "ACME", 122 | value: 167 123 | }, 124 | { 125 | year: "1998", 126 | type: "Compitor", 127 | value: 47 128 | }, 129 | { 130 | year: "1999", 131 | type: "ACME", 132 | value: 142 133 | }, 134 | { 135 | year: "1999", 136 | type: "Compitor" 137 | }, 138 | { 139 | year: "2000", 140 | type: "ACME", 141 | value: 117 142 | }, 143 | { 144 | year: "2000", 145 | type: "Compitor" 146 | }, 147 | { 148 | year: "2001", 149 | type: "ACME", 150 | value: 113 151 | }, 152 | { 153 | year: "2001", 154 | type: "Compitor", 155 | value: 23 156 | }, 157 | { 158 | year: "2002", 159 | type: "ACME", 160 | value: 132 161 | }, 162 | { 163 | year: "2002", 164 | type: "Compitor" 165 | }, 166 | { 167 | year: "2003", 168 | type: "ACME", 169 | value: 146 170 | }, 171 | { 172 | year: "2003", 173 | type: "Compitor", 174 | value: 46 175 | }, 176 | { 177 | year: "2004", 178 | type: "ACME", 179 | value: 169 180 | }, 181 | { 182 | year: "2004", 183 | type: "Compitor", 184 | value: 59 185 | }, 186 | { 187 | year: "2005", 188 | type: "ACME", 189 | value: 184 190 | }, 191 | { 192 | year: "2005", 193 | type: "Compitor", 194 | value: 44 195 | } 196 | ]; 197 | 198 | export const defs = [ 199 | { 200 | dataKey: 'year', 201 | range: [0, 1], 202 | tickCount: 5 203 | } 204 | ] -------------------------------------------------------------------------------- /demo/chart/area-4/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'year', 9 | label: function (text, index, total) { 10 | const textCfg = {}; 11 | if (index === 0) { 12 | textCfg.textAlign = 'left'; 13 | } else if (index === total - 1) { 14 | textCfg.textAlign = 'right'; 15 | } 16 | return textCfg; 17 | } 18 | }], 19 | tooltip: { 20 | showCrosshairs: true 21 | }, 22 | legend: false, 23 | series: [{ 24 | geom: 'area', 25 | position: 'year*value', 26 | color: 'type', 27 | shape: 'smooth' 28 | }, { 29 | geom: 'line', 30 | position: 'year*value', 31 | color: 'type', 32 | shape: 'smooth' 33 | }], 34 | chart: { 35 | id: 'mountNode', 36 | width: 375, 37 | height:240, 38 | pixelRatio: window.devicePixelRatio*2 39 | } 40 | }); -------------------------------------------------------------------------------- /demo/chart/area-4/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function formatGrid (text) { 17 | if (text === '0') { 18 | return { 19 | lineDash: null, 20 | lineWidth: 1 21 | } 22 | } 23 | } 24 | 25 | class App extends React.Component<{data?: Array}> { 26 | state = { 27 | height:240, 28 | width: 375, 29 | pixelRatio: window.devicePixelRatio*2 30 | } 31 | 32 | static defaultProps = { 33 | data: [] 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | } 53 | 54 | ReactDOM.render(, document.getElementById('mount')); 55 | -------------------------------------------------------------------------------- /demo/chart/area-5/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | country: 'Asia', 4 | year: '1750', 5 | value: 502, 6 | percent: 0.6511024643320363 7 | }, { 8 | country: 'Africa', 9 | year: '1750', 10 | value: 106, 11 | percent: 0.13748378728923477 12 | }, { 13 | country: 'Europe', 14 | year: '1750', 15 | value: 163, 16 | percent: 0.21141374837872892 17 | }, { 18 | country: 'Asia', 19 | year: '1800', 20 | value: 635, 21 | percent: 0.671957671957672 22 | }, { 23 | country: 'Africa', 24 | year: '1800', 25 | value: 107, 26 | percent: 0.11322751322751323 27 | }, { 28 | country: 'Europe', 29 | year: '1800', 30 | value: 203, 31 | percent: 0.21481481481481482 32 | }, { 33 | country: 'Asia', 34 | year: '1850', 35 | value: 809, 36 | percent: 0.6764214046822743 37 | }, { 38 | country: 'Africa', 39 | year: '1850', 40 | value: 111, 41 | percent: 0.09280936454849498 42 | }, { 43 | country: 'Europe', 44 | year: '1850', 45 | value: 276, 46 | percent: 0.23076923076923078 47 | }, { 48 | country: 'Asia', 49 | year: '1900', 50 | value: 947, 51 | percent: 0.6364247311827957 52 | }, { 53 | country: 'Africa', 54 | year: '1900', 55 | value: 133, 56 | percent: 0.08938172043010753 57 | }, { 58 | country: 'Europe', 59 | year: '1900', 60 | value: 408, 61 | percent: 0.27419354838709675 62 | }, { 63 | country: 'Asia', 64 | year: '1950', 65 | value: 1402, 66 | percent: 0.6460829493087558 67 | }, { 68 | country: 'Africa', 69 | year: '1950', 70 | value: 221, 71 | percent: 0.10184331797235023 72 | }, { 73 | country: 'Europe', 74 | year: '1950', 75 | value: 547, 76 | percent: 0.252073732718894 77 | }, { 78 | country: 'Asia', 79 | year: '1999', 80 | value: 3634, 81 | percent: 0.7083820662768031 82 | }, { 83 | country: 'Africa', 84 | year: '1999', 85 | value: 767, 86 | percent: 0.14951267056530215 87 | }, { 88 | country: 'Europe', 89 | year: '1999', 90 | value: 729, 91 | percent: 0.14210526315789473 92 | }, { 93 | country: 'Asia', 94 | year: '2050', 95 | value: 5268, 96 | percent: 0.687548942834769 97 | }, { 98 | country: 'Africa', 99 | year: '2050', 100 | value: 1766, 101 | percent: 0.23048812320542938 102 | }, { 103 | country: 'Europe', 104 | year: '2050', 105 | value: 628, 106 | percent: 0.08196293395980161 107 | } 108 | ]; 109 | 110 | export const defs = [ 111 | { 112 | dataKey: 'year', 113 | range: [0, 1] 114 | }, { 115 | dataKey: 'percent', 116 | formatter: function (value) { 117 | value = value || 0; 118 | value = value * 100; 119 | return parseInt(value) + '%' 120 | }, 121 | alias: 'percent(%)' 122 | } 123 | ] 124 | -------------------------------------------------------------------------------- /demo/chart/area-5/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'year', 9 | label: function (text, index, total) { 10 | const textCfg = {}; 11 | if (index === 0) { 12 | textCfg.textAlign = 'left'; 13 | } else if (index === total - 1) { 14 | textCfg.textAlign = 'right'; 15 | } 16 | return textCfg; 17 | } 18 | }], 19 | legend: true, 20 | tooltip: { 21 | showCrosshairs: true, 22 | custom: true, 23 | onChange: function (obj, chart) { 24 | const legend = chart.get('legendController').legends.top[0]; 25 | const tooltipItems = obj.items; 26 | const legendItems = legend.items; 27 | const map = {}; 28 | legendItems.map(function(item) { 29 | map[item.name] = item; 30 | }); 31 | tooltipItems.map(function(item) { 32 | var name = item.name; 33 | var value = item.value; 34 | if (map[name]) { 35 | map[name].value = value; 36 | } 37 | }); 38 | legend.setItems(Object.values(map)); 39 | }, 40 | onHide: function onHide(obj, chart) { 41 | var legend = chart.get('legendController').legends.top[0]; 42 | legend.setItems(chart.getLegendItems().country); 43 | } 44 | }, 45 | series: [{ 46 | geom: 'area', 47 | position: 'year*percent', 48 | color: 'country', 49 | adjust: 'stack' 50 | }, { 51 | geom: 'line', 52 | position: 'year*percent', 53 | color: 'country', 54 | adjust: 'stack' 55 | }], 56 | chart: { 57 | id: 'mountNode', 58 | width: 375, 59 | height:240, 60 | pixelRatio: window.devicePixelRatio*2 61 | } 62 | }); -------------------------------------------------------------------------------- /demo/chart/area-5/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function onChangeTooltip (obj, chart) { 17 | const legend = chart.get('legendController').legends.top[0]; 18 | const tooltipItems = obj.items; 19 | const legendItems = legend.items; 20 | const map = {}; 21 | legendItems.map(function(item) { 22 | map[item.name] = item; 23 | }); 24 | tooltipItems.map(function(item) { 25 | const name = item.name; 26 | const value = item.value; 27 | if (map[name]) { 28 | map[name].value = value; 29 | } 30 | }); 31 | legend.setItems(Object.keys(map).map(key=>map[key])); 32 | } 33 | 34 | function onHideTooltip (obj, chart) { 35 | const legend = chart.get('legendController').legends.top[0]; 36 | legend.setItems(chart.getLegendItems().country); 37 | } 38 | 39 | class App extends React.Component<{data?: Array}> { 40 | state = { 41 | height:240, 42 | width: 375, 43 | pixelRatio: window.devicePixelRatio*2 44 | } 45 | 46 | static defaultProps = { 47 | data: [] 48 | } 49 | 50 | constructor(props) { 51 | super(props); 52 | } 53 | 54 | render() { 55 | const { height, width, pixelRatio } = this.state; 56 | return ( 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | ); 65 | } 66 | } 67 | 68 | ReactDOM.render(, document.getElementById('mount')); 69 | -------------------------------------------------------------------------------- /demo/chart/bar-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | year: '1951 年', 4 | sales: 38 5 | }, { 6 | year: '1952 年', 7 | sales: 52 8 | }, { 9 | year: '1956 年', 10 | sales: 61 11 | }, { 12 | year: '1957 年', 13 | sales: 145 14 | }, { 15 | year: '1958 年', 16 | sales: 48 17 | }, { 18 | year: '1959 年', 19 | sales: 38 20 | }, { 21 | year: '1960 年', 22 | sales: 38 23 | }, { 24 | year: '1962 年', 25 | sales: 38 26 | } 27 | ]; 28 | 29 | export const defs = [{ 30 | dataKey: 'year' 31 | }, { 32 | dataKey: 'sales', 33 | tickCount: 5 34 | }]; 35 | -------------------------------------------------------------------------------- /demo/chart/bar-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: [ 7 | { 8 | dataKey: 'year' 9 | }, { 10 | dataKey: 'sales', 11 | tickCount: 5 12 | } 13 | ], 14 | tooltip: { 15 | showItemMarker: false, 16 | onShow: function onShow(ev) { 17 | var items = ev.items; 18 | items[0].name = null; 19 | items[0].name = items[0].title; 20 | items[0].value = '¥ ' + items[0].value; 21 | } 22 | }, 23 | axis: [{ 24 | dataKey: 'year', 25 | label: { 26 | fontSize:8 27 | } 28 | }, { 29 | dataKey: 'sales' 30 | }], 31 | series: [{ 32 | geom: 'interval', 33 | position: 'year*sales' 34 | }], 35 | chart: { 36 | id: 'mountNode', 37 | width: 375, 38 | height:240, 39 | pixelRatio: window.devicePixelRatio*2 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /demo/chart/bar-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function onShowTooltip (ev) { 7 | const items = ev.items; 8 | items[0].name = null; 9 | items[0].name = items[0].title; 10 | items[0].value = '¥ ' + items[0].value; 11 | } 12 | 13 | class App extends React.Component { 14 | state = { 15 | height:240, 16 | width: 375, 17 | pixelRatio: window.devicePixelRatio*2 18 | } 19 | 20 | constructor(props) { 21 | super(props); 22 | } 23 | 24 | render() { 25 | const { height, width, pixelRatio } = this.state; 26 | return ( 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | ); 36 | } 37 | } 38 | 39 | ReactDOM.render(, document.getElementById('mount')); 40 | -------------------------------------------------------------------------------- /demo/chart/bar-2/data.js: -------------------------------------------------------------------------------- 1 | export const data = [{ 2 | name: 'London', 3 | 月份: 'Jan.', 4 | 月均降雨量: 18.9 5 | }, { 6 | name: 'London', 7 | 月份: 'Feb.', 8 | 月均降雨量: 28.8 9 | }, { 10 | name: 'London', 11 | 月份: 'Mar.', 12 | 月均降雨量: 39.3 13 | }, { 14 | name: 'London', 15 | 月份: 'Apr.', 16 | 月均降雨量: 81.4 17 | }, { 18 | name: 'London', 19 | 月份: 'May.', 20 | 月均降雨量: 47 21 | }, { 22 | name: 'London', 23 | 月份: 'Jun.', 24 | 月均降雨量: 20.3 25 | }, { 26 | name: 'London', 27 | 月份: 'Jul.', 28 | 月均降雨量: 24 29 | }, { 30 | name: 'London', 31 | 月份: 'Aug.', 32 | 月均降雨量: 35.6 33 | }, { 34 | name: 'Berlin', 35 | 月份: 'Jan.', 36 | 月均降雨量: 12.4 37 | }, { 38 | name: 'Berlin', 39 | 月份: 'Feb.', 40 | 月均降雨量: 23.2 41 | }, { 42 | name: 'Berlin', 43 | 月份: 'Mar.', 44 | 月均降雨量: 34.5 45 | }, { 46 | name: 'Berlin', 47 | 月份: 'Apr.', 48 | 月均降雨量: 99.7 49 | }, { 50 | name: 'Berlin', 51 | 月份: 'May.', 52 | 月均降雨量: 52.6 53 | }, { 54 | name: 'Berlin', 55 | 月份: 'Jun.', 56 | 月均降雨量: 35.5 57 | }, { 58 | name: 'Berlin', 59 | 月份: 'Jul.', 60 | 月均降雨量: 37.4 61 | }, { 62 | name: 'Berlin', 63 | 月份: 'Aug.', 64 | 月均降雨量: 42.4 65 | }]; 66 | 67 | export const defs = [{ 68 | dataKey: 'year' 69 | }, { 70 | dataKey: 'sales', 71 | tickCount: 5 72 | }]; 73 | -------------------------------------------------------------------------------- /demo/chart/bar-2/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | tooltip: true, 7 | axis: [{ 8 | dataKey: '月份' 9 | }], 10 | legend: true, 11 | series: [{ 12 | geom: 'interval', 13 | position: '月份*月均降雨量', 14 | color: 'name', 15 | adjust: { 16 | type: 'dodge', 17 | marginRatio: 0.05 18 | } 19 | }], 20 | chart: { 21 | id: 'mountNode', 22 | width: 375, 23 | height:240, 24 | pixelRatio: window.devicePixelRatio*2 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /demo/chart/bar-2/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | // import { data, defs } from './data' 5 | 6 | const defs = [{ 7 | dataKey: 'stat_hour', 8 | tickCount: 13, 9 | }, { 10 | dataKey: 'trd_amt', 11 | formatter: item => `${item / 10000}w`, 12 | tickCount: 6, 13 | min: 0, 14 | }, { 15 | dataKey: 'trd_cnt', 16 | formatter: item => `${item / 10000}w`, 17 | tickCount: 6, 18 | min: 0, 19 | }]; 20 | 21 | const data = new Array(24).fill(0).map((item, index) => ({ 22 | stat_hour: index < 10 ? `0${index}` : `${index}`, 23 | trd_amt: 1340000*Math.random(), 24 | trd_cnt: 20000*Math.random(), 25 | })) 26 | 27 | const crosshairsStyle = { stroke: 'rgba(0, 0, 0, .25)', lineWidth: 2, }; 28 | 29 | class App extends React.Component { 30 | state = { 31 | height:240, 32 | width: 375, 33 | pixelRatio: window.devicePixelRatio*2 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 |
44 | 45 | {/* 46 | 47 | 48 | */} 49 | 50 | 51 | {/* */} 52 | { 55 | // console.log('aaa', value) 56 | // // if (value == 'rain: ') { 57 | // // return '成交订单' 58 | // // } 59 | // // if (value == 'tem: ') { 60 | // // return '成交额' 61 | // // } 62 | // return ''; 63 | // }} 64 | position="bottom" 65 | items={[ 66 | { name: 'a1', marker: { symbol: 'square', stroke: 'red', radius: 8 }}, 67 | { name: 'a2', marker: { symbol: 'square', stroke: 'green', radius: 8 }}, 68 | { name: 'a3', marker: { symbol: 'square', stroke: 'blue', radius: 8 }} 69 | ]} 70 | /> 71 | this.onChangeTooltip(value)} 78 | /> 79 | 80 | 81 | 82 | 83 |
84 | ); 85 | } 86 | } 87 | 88 | ReactDOM.render(, document.getElementById('mount')); 89 | -------------------------------------------------------------------------------- /demo/chart/bar-3/data.js: -------------------------------------------------------------------------------- 1 | export const data = [{ 2 | name: 'London', 3 | 月份: 'Jan.', 4 | 月均降雨量: 18.9 5 | }, { 6 | name: 'London', 7 | 月份: 'Feb.', 8 | 月均降雨量: 28.8 9 | }, { 10 | name: 'London', 11 | 月份: 'Mar.', 12 | 月均降雨量: 39.3 13 | }, { 14 | name: 'London', 15 | 月份: 'Apr.', 16 | 月均降雨量: 81.4 17 | }, { 18 | name: 'London', 19 | 月份: 'May.', 20 | 月均降雨量: 47 21 | }, { 22 | name: 'London', 23 | 月份: 'Jun.', 24 | 月均降雨量: 20.3 25 | }, { 26 | name: 'London', 27 | 月份: 'Jul.', 28 | 月均降雨量: 24 29 | }, { 30 | name: 'London', 31 | 月份: 'Aug.', 32 | 月均降雨量: 35.6 33 | }, { 34 | name: 'Berlin', 35 | 月份: 'Jan.', 36 | 月均降雨量: 12.4 37 | }, { 38 | name: 'Berlin', 39 | 月份: 'Feb.', 40 | 月均降雨量: 23.2 41 | }, { 42 | name: 'Berlin', 43 | 月份: 'Mar.', 44 | 月均降雨量: 34.5 45 | }, { 46 | name: 'Berlin', 47 | 月份: 'Apr.', 48 | 月均降雨量: 99.7 49 | }, { 50 | name: 'Berlin', 51 | 月份: 'May.', 52 | 月均降雨量: 52.6 53 | }, { 54 | name: 'Berlin', 55 | 月份: 'Jun.', 56 | 月均降雨量: 35.5 57 | }, { 58 | name: 'Berlin', 59 | 月份: 'Jul.', 60 | 月均降雨量: 37.4 61 | }, { 62 | name: 'Berlin', 63 | 月份: 'Aug.', 64 | 月均降雨量: 42.4 65 | }]; 66 | 67 | export const defs = [{ 68 | dataKey: 'year' 69 | }, { 70 | dataKey: 'sales', 71 | tickCount: 5 72 | }]; 73 | -------------------------------------------------------------------------------- /demo/chart/bar-3/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | tooltip: { 7 | custom: true, 8 | onChange: function onChange(obj, chart) { 9 | var legend = chart.get('legendController').legends.top[0]; 10 | var tooltipItems = obj.items; 11 | var legendItems = legend.items; 12 | var map = {}; 13 | legendItems.map(function(item) { 14 | map[item.name] = item; 15 | }); 16 | tooltipItems.map(function(item) { 17 | var name = item.name; 18 | var value = item.value; 19 | if (map[name]) { 20 | map[name].value = value; 21 | } 22 | }); 23 | legend.setItems(Object.values(map)); 24 | }, 25 | onHide: function onHide(obj, chart) { 26 | var legend = chart.get('legendController').legends.top[0]; 27 | legend.setItems(chart.getLegendItems().country); 28 | } 29 | }, 30 | legend: true, 31 | axis: [{ 32 | dataKey: '月份' 33 | }], 34 | series: [{ 35 | geom: 'interval', 36 | position: '月份*月均降雨量', 37 | color: 'name', 38 | adjust: 'stack' 39 | }], 40 | chart: { 41 | id: 'mountNode', 42 | width: 375, 43 | height:240, 44 | pixelRatio: window.devicePixelRatio*2 45 | } 46 | }); 47 | -------------------------------------------------------------------------------- /demo/chart/bar-3/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function onChangeTooltip (obj, chart) { 7 | const legend = chart.get('legendController').legends.top[0]; 8 | const tooltipItems = obj.items; 9 | const legendItems = legend.items; 10 | const map = {}; 11 | legendItems.map(function(item) { 12 | map[item.name] = item; 13 | }); 14 | tooltipItems.map(function(item) { 15 | const name = item.name; 16 | const value = item.value; 17 | if (map[name]) { 18 | map[name].value = value; 19 | } 20 | }); 21 | legend.setItems(Object.keys(map).map(key=>map[key])); 22 | } 23 | 24 | function onHideTooltip (obj, chart) { 25 | const legend = chart.get('legendController').legends.top[0]; 26 | legend.setItems(chart.getLegendItems().country); 27 | } 28 | 29 | class App extends React.Component { 30 | state = { 31 | height:240, 32 | width: 375, 33 | pixelRatio: window.devicePixelRatio*2 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | ); 52 | } 53 | } 54 | 55 | ReactDOM.render(, document.getElementById('mount')); 56 | -------------------------------------------------------------------------------- /demo/chart/bar-4/data.js: -------------------------------------------------------------------------------- 1 | export const data = [{ 2 | country: 'Europe', 3 | year: '1750', 4 | value: 163, 5 | percent: 0.24511278195488723 6 | }, { 7 | country: 'Asia', 8 | year: '1750', 9 | value: 502, 10 | percent: 0.7548872180451128 11 | }, { 12 | country: 'Europe', 13 | year: '1800', 14 | value: 203, 15 | percent: 0.24224343675417662 16 | }, { 17 | country: 'Asia', 18 | year: '1800', 19 | value: 635, 20 | percent: 0.7577565632458234 21 | }, { 22 | country: 'Europe', 23 | year: '1850', 24 | value: 276, 25 | percent: 0.2543778801843318 26 | }, { 27 | country: 'Asia', 28 | year: '1850', 29 | value: 809, 30 | percent: 0.7456221198156682 31 | }, { 32 | country: 'Europe', 33 | year: '1900', 34 | value: 408, 35 | percent: 0.3011070110701107 36 | }, { 37 | country: 'Asia', 38 | year: '1900', 39 | value: 947, 40 | percent: 0.6988929889298893 41 | }, { 42 | country: 'Europe', 43 | year: '1950', 44 | value: 547, 45 | percent: 0.2806567470497691 46 | }, { 47 | country: 'Asia', 48 | year: '1950', 49 | value: 1402, 50 | percent: 0.7193432529502309 51 | }, { 52 | country: 'Europe', 53 | year: '1999', 54 | value: 729, 55 | percent: 0.16708686683474674 56 | }, { 57 | country: 'Asia', 58 | year: '1999', 59 | value: 3634, 60 | percent: 0.8329131331652533 61 | }, { 62 | country: 'Europe', 63 | year: '2050', 64 | value: 628, 65 | percent: 0.10651289009497965 66 | }, { 67 | country: 'Asia', 68 | year: '2050', 69 | value: 5268, 70 | percent: 0.8934871099050203 71 | }, { 72 | country: 'Europe', 73 | year: '2100', 74 | value: 828, 75 | percent: 0.10227272727272728 76 | }, { 77 | country: 'Asia', 78 | year: '2100', 79 | value: 7268, 80 | percent: 0.8977272727272727 81 | }]; 82 | 83 | export const defs = [{ 84 | dataKey: 'percent', 85 | min: 0, 86 | formatter: function (value) { 87 | return (value * 100).toFixed(0) + '%' 88 | }, 89 | }]; 90 | -------------------------------------------------------------------------------- /demo/chart/bar-4/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | legend: true, 8 | tooltip: { 9 | custom: true, 10 | onChange: function onChange(obj, chart) { 11 | var legend = chart.get('legendController').legends.top[0]; 12 | var tooltipItems = obj.items; 13 | var legendItems = legend.items; 14 | var map = {}; 15 | legendItems.map(function(item) { 16 | map[item.name] = JSON.parse(JSON.stringify(item)); 17 | }); 18 | tooltipItems.map(function(item) { 19 | var name = item.name; 20 | var value = item.value; 21 | if (map[name]) { 22 | map[name].value = value; 23 | } 24 | }); 25 | legend.setItems(Object.values(map)); 26 | }, 27 | onHide: function onHide(obj, chart) { 28 | const legend = chart.get('legendController').legends.top[0]; 29 | legend.setItems(chart.getLegendItems().country); 30 | } 31 | }, 32 | axis: [{ 33 | dataKey: 'year' 34 | }], 35 | series: [{ 36 | geom: 'interval', 37 | position: 'year*percent', 38 | color: 'country', 39 | adjust: 'stack' 40 | }], 41 | chart: { 42 | id: 'mountNode', 43 | width: 375, 44 | height:240, 45 | pixelRatio: window.devicePixelRatio*2 46 | } 47 | }); 48 | -------------------------------------------------------------------------------- /demo/chart/bar-4/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function onChangeTooltip (obj, chart) { 7 | const legend = chart.get('legendController').legends.top[0]; 8 | const tooltipItems = obj.items; 9 | const legendItems = legend.items; 10 | const map = {}; 11 | legendItems.map(function(item) { 12 | map[item.name] = JSON.parse(JSON.stringify(item)); 13 | }); 14 | tooltipItems.map(function(item) { 15 | const name = item.name; 16 | const value = item.value; 17 | if (map[name]) { 18 | map[name].value = value; 19 | } 20 | }); 21 | legend.setItems(Object.keys(map).map(key=>map[key])); 22 | } 23 | 24 | function onHideTooltip (obj, chart) { 25 | const legend = chart.get('legendController').legends.top[0]; 26 | legend.setItems(chart.getLegendItems().country); 27 | } 28 | 29 | class App extends React.Component { 30 | state = { 31 | height:240, 32 | width: 375, 33 | pixelRatio: window.devicePixelRatio*2 34 | } 35 | 36 | constructor(props) { 37 | super(props); 38 | } 39 | 40 | render() { 41 | const { height, width, pixelRatio } = this.state; 42 | return ( 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | ); 52 | } 53 | } 54 | 55 | ReactDOM.render(, document.getElementById('mount')); 56 | -------------------------------------------------------------------------------- /demo/chart/bar-5/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | country: '巴西', 4 | population: 18203 5 | }, { 6 | country: '印尼', 7 | population: 23489 8 | }, { 9 | country: '美国', 10 | population: 29034 11 | }, { 12 | country: '印度', 13 | population: 104970 14 | }, { 15 | country: '中国', 16 | population: 131744 17 | } 18 | ]; 19 | 20 | export const defs = [{ 21 | dataKey: 'population', 22 | tickCount: 5 23 | }]; 24 | -------------------------------------------------------------------------------- /demo/chart/bar-5/json.js: -------------------------------------------------------------------------------- 1 | import goblin, { Global } from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'country', 9 | grid: null 10 | }, { 11 | dataKey: 'population', 12 | line: null, 13 | grid: Global._defaultAxis.grid, 14 | label: function (text, index, total) { 15 | const textCfg = {}; 16 | if (index === 0) { 17 | textCfg.textAlign = 'left'; 18 | } else if (index === total - 1) { 19 | textCfg.textAlign = 'right'; 20 | } 21 | return textCfg; 22 | } 23 | }], 24 | tooltip: true, 25 | coord: { 26 | transposed: true 27 | }, 28 | series: [{ 29 | geom: 'interval', 30 | position: 'country*population' 31 | }], 32 | chart: { 33 | id: 'mountNode', 34 | width: 375, 35 | height:240, 36 | pixelRatio: window.devicePixelRatio*2 37 | } 38 | }); -------------------------------------------------------------------------------- /demo/chart/bar-5/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Coord, Global, Tooltip } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg:any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | class App extends React.Component<{data?: Array}> { 17 | state = { 18 | height:240, 19 | width: 375, 20 | pixelRatio: window.devicePixelRatio*2 21 | } 22 | 23 | static defaultProps = { 24 | data: [] 25 | } 26 | 27 | constructor(props) { 28 | super(props); 29 | } 30 | 31 | render() { 32 | const { height, width, pixelRatio } = this.state; 33 | return ( 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | ); 44 | } 45 | } 46 | 47 | ReactDOM.render(, document.getElementById('mount')); 48 | -------------------------------------------------------------------------------- /demo/chart/bar-6/data.js: -------------------------------------------------------------------------------- 1 | export const data = [{ 2 | x: '分类一', 3 | y: [76, 100] 4 | }, { 5 | x: '分类二', 6 | y: [56, 108] 7 | }, { 8 | x: '分类三', 9 | y: [38, 129] 10 | }, { 11 | x: '分类四', 12 | y: [58, 155] 13 | }, { 14 | x: '分类五', 15 | y: [45, 120] 16 | }, { 17 | x: '分类六', 18 | y: [23, 99] 19 | }, { 20 | x: '分类七', 21 | y: [18, 56] 22 | }, { 23 | x: '分类八', 24 | y: [18, 34] 25 | } 26 | ]; 27 | 28 | export const defs = [{ 29 | dataKey: 'y', 30 | tickCount: 5 31 | }]; 32 | -------------------------------------------------------------------------------- /demo/chart/bar-6/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: { 8 | dataKey: 'y' 9 | }, 10 | tooltip: { 11 | showItemMarker: false, 12 | onShow: function onShow(ev) { 13 | const items = ev.items; 14 | items[0].name = '范围'; 15 | const value = items[0].value; 16 | items[0].value = value[0] + ' 至 ' + value[1]; 17 | } 18 | }, 19 | series: [{ 20 | geom: 'interval', 21 | position: 'x*y' 22 | }], 23 | chart: { 24 | id: 'mountNode', 25 | width: 375, 26 | height:240, 27 | pixelRatio: window.devicePixelRatio*2 28 | } 29 | }); -------------------------------------------------------------------------------- /demo/chart/bar-6/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function onShowTooltip (ev) { 7 | const items = ev.items; 8 | items[0].name = '范围'; 9 | const value = items[0].value; 10 | items[0].value = value[0] + ' 至 ' + value[1]; 11 | } 12 | 13 | class App extends React.Component<{data?: Array}> { 14 | state = { 15 | height:240, 16 | width: 375, 17 | pixelRatio: window.devicePixelRatio*2 18 | } 19 | 20 | static defaultProps = { 21 | data: [] 22 | } 23 | 24 | constructor(props) { 25 | super(props); 26 | } 27 | 28 | render() { 29 | const { height, width, pixelRatio } = this.state; 30 | return ( 31 |
32 | 33 | 34 | 35 | 36 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | ReactDOM.render(, document.getElementById('mount')); 43 | -------------------------------------------------------------------------------- /demo/chart/bar-7/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { time: '周一', tem: 6.9, city: 'tokyo' }, 3 | { time: '周二', tem: 9.5, city: 'tokyo' }, 4 | { time: '周三', tem: 14.5, city: 'tokyo' }, 5 | { time: '周四', tem: 18.2, city: 'tokyo' }, 6 | { time: '周五', tem: 21.5, city: 'tokyo' }, 7 | { time: '周六', tem: 25.2, city: 'tokyo' }, 8 | { time: '周日', tem: 26.5, city: 'tokyo' }, 9 | { time: '周一', tem: 0.8, city: 'newYork' }, 10 | { time: '周二', tem: 5.7, city: 'newYork' }, 11 | { time: '周三', tem: 11.3, city: 'newYork' }, 12 | { time: '周四', tem: 17, city: 'newYork' }, 13 | { time: '周五', tem: 22, city: 'newYork' }, 14 | { time: '周六', tem: 24.8, city: 'newYork' }, 15 | { time: '周日', tem: 24.1, city: 'newYork' }, 16 | { time: '周一', tem: 0.6, city: 'berlin' }, 17 | { time: '周二', tem: 3.5, city: 'berlin' }, 18 | { time: '周三', tem: 8.4, city: 'berlin' }, 19 | { time: '周四', tem: 13.5, city: 'berlin' }, 20 | { time: '周五', tem: 17, city: 'berlin' }, 21 | { time: '周六', tem: 18.6, city: 'berlin' }, 22 | { time: '周日', tem: 17.9, city: 'berlin' } 23 | ]; 24 | 25 | export const defs = [{ 26 | dataKey: 'tem', 27 | tickCount: 5 28 | }]; 29 | -------------------------------------------------------------------------------- /demo/chart/bar-7/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'time', 9 | label: { 10 | fontSize:12 11 | }, 12 | grid: null, 13 | line: false 14 | }, { 15 | dataKey: 'tem', 16 | show: false 17 | }], 18 | coord: { 19 | type: 'polar', 20 | transposed: true, 21 | endAngle: 2*Math.PI 22 | }, 23 | tooltip: true, 24 | legend: true, 25 | series: [{ 26 | geom: 'interval', 27 | position: 'time*tem', 28 | color: 'city', 29 | adjust: 'dodge' 30 | }], 31 | chart: { 32 | id: 'mountNode', 33 | width: 375, 34 | height:240, 35 | pixelRatio: window.devicePixelRatio*2 36 | } 37 | }); -------------------------------------------------------------------------------- /demo/chart/bar-7/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Coord, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | class App extends React.Component<{data?: Array}> { 7 | state = { 8 | height:240, 9 | width: 375, 10 | pixelRatio: window.devicePixelRatio*2 11 | } 12 | 13 | static defaultProps = { 14 | data: [] 15 | } 16 | 17 | constructor(props) { 18 | super(props); 19 | } 20 | 21 | render() { 22 | const { height, width, pixelRatio } = this.state; 23 | return ( 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | ); 35 | } 36 | } 37 | 38 | ReactDOM.render(, document.getElementById('mount')); -------------------------------------------------------------------------------- /demo/chart/guide-line-text/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Guide } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | 5 | const data = [{ 6 | "month": "Jan", 7 | "city": "London", 8 | "temperature": 3.9 9 | }, { 10 | "month": "Feb", 11 | "city": "London", 12 | "temperature": 4.2 13 | }, { 14 | "month": "Mar", 15 | "city": "London", 16 | "temperature": 5.7 17 | }, { 18 | "month": "Apr", 19 | "city": "London", 20 | "temperature": 8.5 21 | }, { 22 | "month": "May", 23 | "city": "London", 24 | "temperature": 11.9 25 | }, { 26 | "month": "Jun", 27 | "city": "London", 28 | "temperature": 15.2 29 | }, { 30 | "month": "Jul", 31 | "city": "London", 32 | "temperature": 17 33 | }, { 34 | "month": "Aug", 35 | "city": "London", 36 | "temperature": 16.6 37 | }, { 38 | "month": "Sep", 39 | "city": "London", 40 | "temperature": 14.2 41 | }, { 42 | "month": "Oct", 43 | "city": "London", 44 | "temperature": 10.3 45 | }, { 46 | "month": "Nov", 47 | "city": "London", 48 | "temperature": 6.6 49 | }, { 50 | "month": "Dec", 51 | "city": "London", 52 | "temperature": 4.8 53 | }]; 54 | 55 | function marker (x, y, r, ctx) { 56 | ctx.lineWidth = 1; 57 | ctx.strokeStyle = ctx.fillStyle; 58 | ctx.moveTo(x - r - 3, y); 59 | ctx.lineTo(x + r + 3, y); 60 | ctx.stroke(); 61 | ctx.arc(x, y, r, 0, Math.PI * 2, false); 62 | ctx.fill(); 63 | } 64 | 65 | class App extends React.Component<{data?: Array}> { 66 | state = { 67 | height:240, 68 | width: 375, 69 | pixelRatio: window.devicePixelRatio*2, 70 | data, 71 | } 72 | 73 | constructor(props) { 74 | super(props); 75 | setTimeout(() => { 76 | this.setState({ data: data.map(item => ({ ...item, temperature: item.temperature + 1 }))}) 77 | }, 3000); 78 | } 79 | 80 | render() { 81 | const { height, width, pixelRatio, data } = this.state; 82 | return ( 83 |
84 | 85 | 86 | 87 | { 88 | data.map(item => ( 89 | 95 | )) 96 | } 97 | 98 | 99 |
100 | ); 101 | } 102 | } 103 | 104 | ReactDOM.render(, document.getElementById('mount')); -------------------------------------------------------------------------------- /demo/chart/index.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | type: 'point-1', 4 | desc: '散点图1', 5 | group: '散点图', 6 | case: ['json', 'react'] 7 | }, 8 | { 9 | type: 'point-2', 10 | desc: '散点图2', 11 | group: '散点图', 12 | case: ['json', 'react'] 13 | }, 14 | { 15 | type: 'line-1', 16 | desc: '折线图1', 17 | group: '折线图', 18 | case: ['json', 'react'] 19 | },{ 20 | type: 'guide-line-text', 21 | desc: '折线图待guide', 22 | group: '折线图', 23 | case: ['react'], 24 | }, 25 | { 26 | type: 'line-2', 27 | desc: '折线图2', 28 | group: '折线图', 29 | case: ['json', 'react'] 30 | }, 31 | { 32 | type: 'line-3', 33 | desc: '折线图3', 34 | group: '折线图', 35 | case: ['json', 'react'] 36 | }, 37 | { 38 | type: 'line-4', 39 | desc: '折线图4', 40 | group: '折线图', 41 | case: ['json', 'react'] 42 | }, 43 | { 44 | type: 'bar-1', 45 | desc: '柱状图1', 46 | group: '柱状图', 47 | case: ['json', 'react'] 48 | }, 49 | { 50 | type: 'bar-2', 51 | desc: '柱状图2', 52 | group: '柱状图', 53 | case: ['json', 'react'] 54 | }, 55 | { 56 | type: 'bar-3', 57 | desc: '柱状图3', 58 | group: '柱状图', 59 | case: ['json', 'react'] 60 | }, 61 | { 62 | type: 'bar-4', 63 | desc: '柱状图4', 64 | group: '柱状图', 65 | case: ['json', 'react'] 66 | }, 67 | { 68 | type: 'bar-5', 69 | desc: '条形图1', 70 | group: '条形图', 71 | case: ['json', 'react'] 72 | }, 73 | { 74 | type: 'bar-6', 75 | desc: '区间柱状图', 76 | group: '区间柱状图', 77 | case: ['json', 'react'] 78 | }, 79 | { 80 | type: 'bar-7', 81 | desc: '环图', 82 | group: '环图', 83 | case: ['json', 'react'] 84 | }, 85 | { 86 | type: 'area-1', 87 | desc: '面积图1', 88 | group: '面积图', 89 | case: ['json', 'react'] 90 | }, 91 | { 92 | type: 'area-2', 93 | desc: '面积图2', 94 | group: '面积图', 95 | case: ['json', 'react'] 96 | }, { 97 | type: 'area-3', 98 | desc: '面积图3', 99 | group: '面积图', 100 | case: ['json', 'react'] 101 | }, { 102 | type: 'area-4', 103 | desc: '面积图4', 104 | group: '面积图', 105 | case: ['json', 'react'] 106 | }, { 107 | type: 'area-5', 108 | desc: '面积图5', 109 | group: '面积图', 110 | case: ['json', 'react'] 111 | }, { 112 | type: 'pie-1', 113 | desc: '饼图1', 114 | group: '饼图', 115 | case: ['json', 'react'] 116 | }, { 117 | type: 'pie-2', 118 | desc: '饼图2', 119 | group: '饼图', 120 | case: ['json', 'react'] 121 | },{ 122 | type: 'pie-labelline', 123 | desc: '带文本的饼图', 124 | group: '饼图', 125 | case: ['json', 'react'] 126 | }, { 127 | type: 'pie-with-label', 128 | desc: '带图例、文本的饼图', 129 | group: '饼图', 130 | case: ['json', 'react'], 131 | }, { 132 | type: 'pie-click', 133 | desc: '可点击的文本', 134 | group: '饼图', 135 | case: ['json', 'react'], 136 | }, { 137 | type: 'radar-1', 138 | desc: '雷达图1', 139 | group: '雷达图', 140 | case: ['json', 'react'] 141 | } 142 | ]; -------------------------------------------------------------------------------- /demo/chart/line-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | date: "2017-06-05", 4 | value: 116 5 | }, { 6 | date: "2017-06-06", 7 | value: 129 8 | }, { 9 | date: "2017-06-07", 10 | value: 135 11 | }, { 12 | date: "2017-06-08", 13 | value: 86 14 | }, { 15 | date: "2017-06-09", 16 | value: 73 17 | }, { 18 | date: "2017-06-10", 19 | value: 85 20 | }, { 21 | date: "2017-06-11", 22 | value: 73 23 | }, { 24 | date: "2017-06-12", 25 | value: 68 26 | }, { 27 | date: "2017-06-13", 28 | value: 92 29 | }, { 30 | date: "2017-06-14", 31 | value: 130 32 | }, { 33 | date: "2017-06-15", 34 | value: 245 35 | }, { 36 | date: "2017-06-16", 37 | value: 139 38 | }, { 39 | date: "2017-06-17", 40 | value: 115 41 | }, { 42 | date: "2017-06-18", 43 | value: 111 44 | }, { 45 | date: "2017-06-19", 46 | value: 309 47 | }, { 48 | date: "2017-06-20", 49 | value: 206 50 | }, { 51 | date: "2017-06-21", 52 | value: 137 53 | }, { 54 | date: "2017-06-22", 55 | value: 128 56 | }, { 57 | date: "2017-06-23", 58 | value: 85 59 | }, { 60 | date: "2017-06-24", 61 | value: 94 62 | }, { 63 | date: "2017-06-25", 64 | value: 71 65 | }, { 66 | date: "2017-06-26", 67 | value: 106 68 | }, { 69 | date: "2017-06-27", 70 | value: 84 71 | }, { 72 | date: "2017-06-28", 73 | value: 93 74 | }, { 75 | date: "2017-06-29", 76 | value: 85 77 | }, { 78 | date: "2017-06-30", 79 | value: 73 80 | }, { 81 | date: "2017-07-01", 82 | value: 83 83 | }, { 84 | date: "2017-07-02", 85 | value: 125 86 | }, { 87 | date: "2017-07-03", 88 | value: 107 89 | }, { 90 | date: "2017-07-04", 91 | value: 82 92 | }, { 93 | date: "2017-07-05", 94 | value: 44 95 | }, { 96 | date: "2017-07-06", 97 | value: 72 98 | }, { 99 | date: "2017-07-07", 100 | value: 106 101 | }, { 102 | date: "2017-07-08", 103 | value: 107 104 | }, { 105 | date: "2017-07-09", 106 | value: 66 107 | }, { 108 | date: "2017-07-10", 109 | value: 91 110 | }, { 111 | date: "2017-07-11", 112 | value: 92 113 | }, { 114 | date: "2017-07-12", 115 | value: 113 116 | }, { 117 | date: "2017-07-13", 118 | value: 107 119 | }, { 120 | date: "2017-07-14", 121 | value: 131 122 | }, { 123 | date: "2017-07-15", 124 | value: 111 125 | }, { 126 | date: "2017-07-16", 127 | value: 64 128 | }, { 129 | date: "2017-07-17", 130 | value: 69 131 | }, { 132 | date: "2017-07-18", 133 | value: 88 134 | }, { 135 | date: "2017-07-19", 136 | value: 77 137 | }, { 138 | date: "2017-07-20", 139 | value: 83 140 | }, { 141 | date: "2017-07-21", 142 | value: 111 143 | }, { 144 | date: "2017-07-22", 145 | value: 57 146 | }, { 147 | date: "2017-07-23", 148 | value: 55 149 | }, { 150 | date: "2017-07-24", 151 | value: 60 152 | } 153 | ]; 154 | 155 | export const defs = [ 156 | { 157 | dataKey: 'value', 158 | tickCount: 5, 159 | min: 0 160 | }, 161 | { 162 | dataKey: 'date', 163 | type: 'timeCat', 164 | range: [0, 1], 165 | tickCount: 3 166 | } 167 | ]; 168 | -------------------------------------------------------------------------------- /demo/chart/line-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: [ 7 | { 8 | dataKey: 'value', 9 | tickCount: 5, 10 | min: 0 11 | }, 12 | { 13 | dataKey: 'date', 14 | type: 'timeCat', 15 | range: [0, 1], 16 | tickCount: 3 17 | } 18 | ], 19 | axis: [{ 20 | dataKey: 'date', 21 | label: function label(text, index, total) { 22 | var textCfg = {}; 23 | if (index === 0) { 24 | textCfg.textAlign = 'left'; 25 | } else if (index === total - 1) { 26 | textCfg.textAlign = 'right'; 27 | } 28 | return textCfg; 29 | } 30 | }, { 31 | dataKey: 'value', 32 | label: { 33 | fontSize:12 34 | } 35 | }], 36 | tooltip: { 37 | showItemMarker: false, 38 | showCrosshairs: true, 39 | onShow: function onShow(ev) { 40 | var items = ev.items; 41 | items[0].name = items[0].title; 42 | } 43 | }, 44 | series: [{ 45 | geom: 'line', 46 | position: 'date*value' 47 | }], 48 | chart: { 49 | id: '', 50 | el: document.getElementById('mountNode'), 51 | width: 375, 52 | height:240, 53 | pixelRatio: window.devicePixelRatio*2 54 | } 55 | }); 56 | -------------------------------------------------------------------------------- /demo/chart/line-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function label (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function onShowTooltip (ev) { 17 | const items: any = ev.items; 18 | items[0].name = items[0].title; 19 | } 20 | 21 | class App extends React.Component { 22 | state = { 23 | height:240, 24 | width: 375, 25 | pixelRatio: window.devicePixelRatio*2 26 | } 27 | 28 | constructor(props) { 29 | super(props); 30 | } 31 | 32 | render() { 33 | const { height, width, pixelRatio } = this.state; 34 | return ( 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | ); 44 | } 45 | } 46 | 47 | ReactDOM.render(, document.getElementById('mount')); 48 | -------------------------------------------------------------------------------- /demo/chart/line-2/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'date', 9 | label: function (text, index, total) { 10 | var textCfg = {}; 11 | if (index === 0) { 12 | textCfg.textAlign = 'left'; 13 | } else if (index === total - 1) { 14 | textCfg.textAlign = 'right'; 15 | } 16 | return textCfg; 17 | } 18 | }, { 19 | dataKey: 'value', 20 | label: { 21 | fontSize:12 22 | } 23 | }], 24 | legend: true, 25 | tooltip: { 26 | showCrosshairs: true, 27 | custom: true, 28 | onChange: function onChange(obj, chart) { 29 | var legend = chart.get('legendController').legends.top[0]; 30 | var tooltipItems = obj.items; 31 | var legendItems = legend.items; 32 | var map = {}; 33 | legendItems.map(function(item) { 34 | map[item.name] = item; 35 | }); 36 | tooltipItems.map(function(item) { 37 | var name = item.name; 38 | var value = item.value; 39 | if (map[name]) { 40 | map[name].value = value; 41 | } 42 | }); 43 | legend.setItems(Object.values(map)); 44 | }, 45 | onHide: function onHide(obj, chart) { 46 | var legend = chart.get('legendController').legends.top[0]; 47 | legend.setItems(chart.getLegendItems().country); 48 | } 49 | }, 50 | series: [{ 51 | geom: 'line', 52 | position: 'date*value', 53 | color: 'type' 54 | }], 55 | chart: { 56 | id: 'mountNode', 57 | width: '320', 58 | height:240, 59 | pixelRatio: window.devicePixelRatio*2 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /demo/chart/line-2/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function onChangeTooltip (obj, chart) { 17 | const legend = chart.get('legendController').legends.top[0]; 18 | const tooltipItems = obj.items; 19 | const legendItems = legend.items; 20 | const map = {}; 21 | legendItems.map(function(item) { 22 | map[item.name] = item; 23 | }); 24 | tooltipItems.map(function(item) { 25 | const name = item.name; 26 | const value = item.value; 27 | if (map[name]) { 28 | map[name].value = value; 29 | } 30 | }); 31 | legend.setItems(Object.keys(map).map(key=>map[key])); 32 | } 33 | 34 | function onHideTooltip (obj, chart) { 35 | const legend = chart.get('legendController').legends.top[0]; 36 | legend.setItems(chart.getLegendItems().country); 37 | } 38 | 39 | class App extends React.Component<{data?: Array}> { 40 | state = { 41 | height: 240, 42 | width: '320', 43 | pixelRatio: window.devicePixelRatio*2 44 | } 45 | 46 | static defaultProps = { 47 | data: [] 48 | } 49 | 50 | constructor(props) { 51 | super(props); 52 | } 53 | 54 | render() { 55 | const { height, width, pixelRatio } = this.state; 56 | return ( 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 | ); 67 | } 68 | } 69 | 70 | ReactDOM.render(, document.getElementById('mount')); 71 | -------------------------------------------------------------------------------- /demo/chart/line-3/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'date', 9 | label: function (text, index, total) { 10 | var textCfg = {}; 11 | if (index === 0) { 12 | textCfg.textAlign = 'left'; 13 | } else if (index === total - 1) { 14 | textCfg.textAlign = 'right'; 15 | } 16 | return textCfg; 17 | } 18 | }, { 19 | dataKey: 'value', 20 | label: { 21 | fontSize:12 22 | } 23 | }], 24 | legend: true, 25 | tooltip: { 26 | showCrosshairs: true, 27 | custom: true, 28 | onChange: function onChange(obj, chart) { 29 | var legend = chart.get('legendController').legends.top[0]; 30 | var tooltipItems = obj.items; 31 | var legendItems = legend.items; 32 | var map = {}; 33 | legendItems.map(function(item) { 34 | map[item.name] = item; 35 | }); 36 | tooltipItems.map(function(item) { 37 | var name = item.name; 38 | var value = item.value; 39 | if (map[name]) { 40 | map[name].value = value; 41 | } 42 | }); 43 | legend.setItems(Object.values(map)); 44 | }, 45 | onHide: function onHide(obj, chart) { 46 | var legend = chart.get('legendController').legends.top[0]; 47 | legend.setItems(chart.getLegendItems().country); 48 | } 49 | }, 50 | series: [{ 51 | geom: 'line', 52 | position: 'date*value', 53 | color: 'type' 54 | }], 55 | chart: { 56 | id: 'mountNode', 57 | width: '320', 58 | height:240, 59 | pixelRatio: window.devicePixelRatio*2 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /demo/chart/line-3/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | const textCfg: any = {}; 8 | if (index === 0) { 9 | textCfg.textAlign = 'left'; 10 | } else if (index === total - 1) { 11 | textCfg.textAlign = 'right'; 12 | } 13 | return textCfg; 14 | } 15 | 16 | function onChangeTooltip (obj, chart) { 17 | const legend = chart.get('legendController').legends.top[0]; 18 | const tooltipItems = obj.items; 19 | const legendItems = legend.items; 20 | const map = {}; 21 | legendItems.map(function(item) { 22 | map[item.name] = item; 23 | }); 24 | tooltipItems.map(function(item) { 25 | const name = item.name; 26 | const value = item.value; 27 | if (map[name]) { 28 | map[name].value = value; 29 | } 30 | }); 31 | legend.setItems(Object.keys(map).map(key=>map[key])); 32 | } 33 | 34 | function onHideTooltip (obj, chart) { 35 | const legend = chart.get('legendController').legends.top[0]; 36 | legend.setItems(chart.getLegendItems().country); 37 | } 38 | 39 | class App extends React.Component<{data?: Array}> { 40 | state = { 41 | height: 240, 42 | width: '320', 43 | pixelRatio: window.devicePixelRatio*2 44 | } 45 | 46 | static defaultProps = { 47 | data: [] 48 | } 49 | 50 | constructor(props) { 51 | super(props); 52 | } 53 | 54 | render() { 55 | const { height, width, pixelRatio } = this.state; 56 | return ( 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 | ); 67 | } 68 | } 69 | 70 | ReactDOM.render(, document.getElementById('mount')); 71 | -------------------------------------------------------------------------------- /demo/chart/line-4/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | 3 | const data = [{ 4 | "month": "Jan", 5 | "city": "Tokyo", 6 | "temperature": 7 7 | }, { 8 | "month": "Jan", 9 | "city": "London", 10 | "temperature": 3.9 11 | }, { 12 | "month": "Feb", 13 | "city": "Tokyo", 14 | "temperature": 6.9 15 | }, { 16 | "month": "Feb", 17 | "city": "London", 18 | "temperature": 4.2 19 | }, { 20 | "month": "Mar", 21 | "city": "Tokyo", 22 | "temperature": 9.5 23 | }, { 24 | "month": "Mar", 25 | "city": "London", 26 | "temperature": 5.7 27 | }, { 28 | "month": "Apr", 29 | "city": "Tokyo", 30 | "temperature": 14.5 31 | }, { 32 | "month": "Apr", 33 | "city": "London", 34 | "temperature": 8.5 35 | }, { 36 | "month": "May", 37 | "city": "Tokyo", 38 | "temperature": 18.4 39 | }, { 40 | "month": "May", 41 | "city": "London", 42 | "temperature": 11.9 43 | }, { 44 | "month": "Jun", 45 | "city": "Tokyo", 46 | "temperature": 21.5 47 | }, { 48 | "month": "Jun", 49 | "city": "London", 50 | "temperature": 15.2 51 | }, { 52 | "month": "Jul", 53 | "city": "Tokyo", 54 | "temperature": 25.2 55 | }, { 56 | "month": "Jul", 57 | "city": "London", 58 | "temperature": 17 59 | }, { 60 | "month": "Aug", 61 | "city": "Tokyo", 62 | "temperature": 26.5 63 | }, { 64 | "month": "Aug", 65 | "city": "London", 66 | "temperature": 16.6 67 | }, { 68 | "month": "Sep", 69 | "city": "Tokyo", 70 | "temperature": 23.3 71 | }, { 72 | "month": "Sep", 73 | "city": "London", 74 | "temperature": 14.2 75 | }, { 76 | "month": "Oct", 77 | "city": "Tokyo", 78 | "temperature": 18.3 79 | }, { 80 | "month": "Oct", 81 | "city": "London", 82 | "temperature": 10.3 83 | }, { 84 | "month": "Nov", 85 | "city": "Tokyo", 86 | "temperature": 13.9 87 | }, { 88 | "month": "Nov", 89 | "city": "London", 90 | "temperature": 6.6 91 | }, { 92 | "month": "Dec", 93 | "city": "Tokyo", 94 | "temperature": 9.6 95 | }, { 96 | "month": "Dec", 97 | "city": "London", 98 | "temperature": 4.8 99 | }]; 100 | 101 | goblin({ 102 | data: data, 103 | tooltip: { 104 | showCrosshairs: true 105 | }, 106 | axis: [{ 107 | dataKey: 'month' 108 | }, { 109 | dataKey: 'temperature' 110 | }], 111 | legend: { 112 | marker: function marker(x, y, r, ctx) { 113 | ctx.lineWidth = 1; 114 | ctx.strokeStyle = ctx.fillStyle; 115 | ctx.moveTo(x - r - 3, y); 116 | ctx.lineTo(x + r + 3, y); 117 | ctx.stroke(); 118 | ctx.arc(x, y, r, 0, Math.PI * 2, false); 119 | ctx.fill(); 120 | } 121 | }, 122 | series: [{ 123 | geom: 'line', 124 | position: 'month*temperature', 125 | color: 'city' 126 | }, { 127 | geom: 'point', 128 | position: 'month*temperature', 129 | color: 'city', 130 | style: { 131 | lineWidth: 1, 132 | stroke: '#fff' 133 | } 134 | }], 135 | chart: { 136 | id: 'mountNode', 137 | width: 375, 138 | height:240, 139 | pixelRatio: window.devicePixelRatio*2 140 | } 141 | }); -------------------------------------------------------------------------------- /demo/chart/line-4/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Tooltip, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | 5 | const data = [{ 6 | "month": "Jan", 7 | "city": "Tokyo", 8 | "temperature": 7 9 | }, { 10 | "month": "Jan", 11 | "city": "London", 12 | "temperature": 3.9 13 | }, { 14 | "month": "Feb", 15 | "city": "Tokyo", 16 | "temperature": 6.9 17 | }, { 18 | "month": "Feb", 19 | "city": "London", 20 | "temperature": 4.2 21 | }, { 22 | "month": "Mar", 23 | "city": "Tokyo", 24 | "temperature": 9.5 25 | }, { 26 | "month": "Mar", 27 | "city": "London", 28 | "temperature": 5.7 29 | }, { 30 | "month": "Apr", 31 | "city": "Tokyo", 32 | "temperature": 14.5 33 | }, { 34 | "month": "Apr", 35 | "city": "London", 36 | "temperature": 8.5 37 | }, { 38 | "month": "May", 39 | "city": "Tokyo", 40 | "temperature": 18.4 41 | }, { 42 | "month": "May", 43 | "city": "London", 44 | "temperature": 11.9 45 | }, { 46 | "month": "Jun", 47 | "city": "Tokyo", 48 | "temperature": 21.5 49 | }, { 50 | "month": "Jun", 51 | "city": "London", 52 | "temperature": 15.2 53 | }, { 54 | "month": "Jul", 55 | "city": "Tokyo", 56 | "temperature": 25.2 57 | }, { 58 | "month": "Jul", 59 | "city": "London", 60 | "temperature": 17 61 | }, { 62 | "month": "Aug", 63 | "city": "Tokyo", 64 | "temperature": 26.5 65 | }, { 66 | "month": "Aug", 67 | "city": "London", 68 | "temperature": 16.6 69 | }, { 70 | "month": "Sep", 71 | "city": "Tokyo", 72 | "temperature": 23.3 73 | }, { 74 | "month": "Sep", 75 | "city": "London", 76 | "temperature": 14.2 77 | }, { 78 | "month": "Oct", 79 | "city": "Tokyo", 80 | "temperature": 18.3 81 | }, { 82 | "month": "Oct", 83 | "city": "London", 84 | "temperature": 10.3 85 | }, { 86 | "month": "Nov", 87 | "city": "Tokyo", 88 | "temperature": 13.9 89 | }, { 90 | "month": "Nov", 91 | "city": "London", 92 | "temperature": 6.6 93 | }, { 94 | "month": "Dec", 95 | "city": "Tokyo", 96 | "temperature": 9.6 97 | }, { 98 | "month": "Dec", 99 | "city": "London", 100 | "temperature": 4.8 101 | }]; 102 | 103 | function marker (x, y, r, ctx) { 104 | ctx.lineWidth = 1; 105 | ctx.strokeStyle = ctx.fillStyle; 106 | ctx.moveTo(x - r - 3, y); 107 | ctx.lineTo(x + r + 3, y); 108 | ctx.stroke(); 109 | ctx.arc(x, y, r, 0, Math.PI * 2, false); 110 | ctx.fill(); 111 | } 112 | 113 | class App extends React.Component<{data?: Array}> { 114 | state = { 115 | height: 240, 116 | width: '320', 117 | pixelRatio: window.devicePixelRatio*2 118 | } 119 | 120 | constructor (props) { 121 | super(props); 122 | } 123 | 124 | render () { 125 | const { height, width, pixelRatio } = this.state; 126 | return ( 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | ); 136 | } 137 | } 138 | 139 | ReactDOM.render(, document.getElementById('mount')); 140 | -------------------------------------------------------------------------------- /demo/chart/pie-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | name: '芳华', 4 | percent: 0.4, 5 | a: '1' 6 | }, { 7 | name: '妖猫传', 8 | percent: 0.2, 9 | a: '1' 10 | }, { 11 | name: '机器之血', 12 | percent: 0.18, 13 | a: '1' 14 | }, { 15 | name: '心理罪', 16 | percent: 0.15, 17 | a: '1' 18 | }, { 19 | name: '寻梦环游记', 20 | percent: 0.05, 21 | a: '1' 22 | }, { 23 | name: '其他', 24 | percent: 0.02, 25 | a: '1' 26 | } 27 | ]; 28 | -------------------------------------------------------------------------------- /demo/chart/pie-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | const map = { 5 | '芳华': '40%', 6 | '妖猫传': '20%', 7 | '机器之血': '18%', 8 | '心理罪': '15%', 9 | '寻梦环游记': '5%', 10 | '其他': '2%' 11 | }; 12 | 13 | goblin({ 14 | data: data, 15 | defs: [{ 16 | dataKey: 'percent', 17 | formatter: function formatter(val) { 18 | return val * 100 + '%'; 19 | } 20 | }], 21 | legend: { 22 | position: 'right', 23 | itemFormatter: function itemFormatter(val) { 24 | return val + ' ' + map[val]; 25 | } 26 | }, 27 | axis: false, 28 | tooltip: false, 29 | coord: { 30 | type: 'polar', 31 | transposed: true, 32 | radius: 0.85 33 | }, 34 | series: [{ 35 | geom: 'interval', 36 | position: 'a*percent', 37 | color: ['name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']], 38 | adjust: 'stack', 39 | style: { 40 | lineWidth: 1, 41 | stroke: '#fff', 42 | lineJoin: 'round', 43 | lineCap: 'round' 44 | } 45 | }], 46 | animate: { 47 | appear: { 48 | duration: 1200, 49 | easing: 'bounceOut' 50 | } 51 | }, 52 | chart: { 53 | id: 'mountNode', 54 | width: 375, 55 | height:240, 56 | pixelRatio: window.devicePixelRatio*2 57 | } 58 | }); -------------------------------------------------------------------------------- /demo/chart/pie-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Coord, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data } from './data'; 5 | 6 | const map = { 7 | '芳华': '40%', 8 | '妖猫传': '20%', 9 | '机器之血': '18%', 10 | '心理罪': '15%', 11 | '寻梦环游记': '5%', 12 | '其他': '2%' 13 | }; 14 | 15 | const defs = [{ 16 | dataKey: 'percent', 17 | formatter: val => val * 100 + '%' 18 | }] 19 | 20 | class App extends React.Component<{data?: Array}> { 21 | state = { 22 | height: 240, 23 | width: 375, 24 | pixelRatio: window.devicePixelRatio*2 25 | } 26 | 27 | constructor(props) { 28 | super(props); 29 | } 30 | 31 | render() { 32 | const { height, width, pixelRatio } = this.state; 33 | return ( 34 |
35 | 36 | 37 | 47 | value + ' ' + map[value]}/> 48 | 49 |
50 | ); 51 | } 52 | } 53 | 54 | ReactDOM.render(, document.getElementById('mount')); 55 | -------------------------------------------------------------------------------- /demo/chart/pie-2/data.js: -------------------------------------------------------------------------------- 1 | export const data = [{ 2 | year: '2001', 3 | population: 41.8 4 | }, { 5 | year: '2002', 6 | population: 25.8 7 | }, { 8 | year: '2003', 9 | population: 31.7 10 | }, { 11 | year: '2004', 12 | population: 46 13 | }, { 14 | year: '2005', 15 | population: 28 16 | }]; 17 | 18 | -------------------------------------------------------------------------------- /demo/chart/pie-2/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | axis: false, 7 | coord: { 8 | type: 'polar', 9 | innerRadius: 0 10 | }, 11 | legend: { 12 | position: 'right' 13 | }, 14 | series: [{ 15 | geom: 'interval', 16 | position: 'year*population', 17 | color: 'year', 18 | style: { 19 | lineWidth: 1, 20 | stroke: '#fff' 21 | } 22 | }], 23 | chart: { 24 | id: 'mountNode', 25 | width: 375, 26 | height: 240, 27 | pixelRatio: window.devicePixelRatio*2 28 | } 29 | }); -------------------------------------------------------------------------------- /demo/chart/pie-2/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Geom, Coord, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data } from './data'; 5 | 6 | class App extends React.Component<{data?: Array}> { 7 | state = { 8 | height:240, 9 | width: 375, 10 | pixelRatio: window.devicePixelRatio*2 11 | } 12 | 13 | constructor(props) { 14 | super(props); 15 | } 16 | 17 | render() { 18 | const { height, width, pixelRatio } = this.state; 19 | return ( 20 |
21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | } 30 | 31 | ReactDOM.render(, document.getElementById('mount')); 32 | -------------------------------------------------------------------------------- /demo/chart/pie-click/json.js: -------------------------------------------------------------------------------- 1 | import goblin, { Chart } from '../../../packages/goblin/lib'; 2 | import registerPieLable from '../../../packages/goblin/lib/plugin/pieLabel'; 3 | 4 | const data = [ 5 | { const: 'const', type: '交通出行', money: 51.39 }, 6 | { const: 'const', type: '饮食', money: 356.68 }, 7 | { const: 'const', type: '生活日用', money: 20.00 }, 8 | { const: 'const', type: '住房缴费', money: 116.53 }, 9 | ]; 10 | 11 | registerPieLable(Chart); 12 | goblin({ 13 | data, 14 | coord: { 15 | type: 'polar', 16 | transposed: true, 17 | radius: 0.9, 18 | innerRadius: 0.5 19 | }, 20 | guide: { 21 | type: 'html', 22 | position: ['50%', '50%'], 23 | html: '

' 24 | }, 25 | pieLabel: { 26 | sidePadding: 30, 27 | activeShape: true, 28 | label1: function label1(data) { 29 | return { 30 | text: '￥' + data.money, 31 | fill: '#343434', 32 | fontWeight: 'bold' 33 | }; 34 | }, 35 | label2: function label2(data) { 36 | return { 37 | text: data.type, 38 | fill: '#999' 39 | }; 40 | }, 41 | onClick: function onClick(ev) { 42 | var data = ev.data; 43 | if (data) { 44 | document.getElementById('title').innerHTML = data.type; 45 | document.getElementById('money').innerHTML = data.money; 46 | } 47 | } 48 | }, 49 | series: [{ 50 | geom: 'interval', 51 | position: 'const*money', 52 | color: ['type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']], 53 | adjust: 'stack', 54 | }], 55 | chart: { 56 | id: 'mountNode', 57 | height:240, 58 | pixelRatio: window.devicePixelRatio*2 59 | } 60 | }); 61 | -------------------------------------------------------------------------------- /demo/chart/pie-click/react.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from 'react-dom'; 2 | import * as React from 'react'; 3 | import { Chart, Geom, Coord, Guide } from '../../../packages/bizgoblin/es'; 4 | import PieLabel from '../../../packages/bizgoblin/es/plugin/PieLabel'; 5 | 6 | const data = [ 7 | { const: 'const', type: '交通出行', money: 51.39 }, 8 | { const: 'const', type: '饮食', money: 356.68 }, 9 | { const: 'const', type: '生活日用', money: 20.00 }, 10 | { const: 'const', type: '住房缴费', money: 116.53 }, 11 | ]; 12 | 13 | class App extends React.Component<{data?: Array}> { 14 | state = { 15 | height: 240, 16 | width: 375, 17 | pixelRatio: window.devicePixelRatio*2 18 | } 19 | 20 | constructor(props) { 21 | super(props); 22 | } 23 | 24 | render() { 25 | const { height, width, pixelRatio } = this.state; 26 | return ( 27 |
28 | 29 | 30 | 35 | 40 | ({ text: '￥' + data.money, fill: '#343434', fontWeight: 'bold' }) } 43 | label2={data => ({ text: data.type, fill: '#999' })} 44 | onClick={e => { 45 | const data = e.data; 46 | if (data) { 47 | document.getElementById('title').innerHTML = data.type; 48 | document.getElementById('money').innerHTML = data.money; 49 | } 50 | }} 51 | /> 52 | 53 |
54 | ); 55 | } 56 | } 57 | 58 | ReactDOM.render(, document.getElementById('mount')); 59 | -------------------------------------------------------------------------------- /demo/chart/pie-labelline/json.js: -------------------------------------------------------------------------------- 1 | import goblin, { Chart } from '../../../packages/goblin/lib'; 2 | import registerPieLable from '../../../packages/goblin/lib/plugin/pieLabel'; 3 | 4 | const data = [ 5 | { name: '其他消费', y: 6371664, const: 'const' }, 6 | { name: '生活用品', y: 7216301, const: 'const' }, 7 | { name: '通讯物流', y: 1500621, const: 'const' }, 8 | { name: '交通出行', y: 586622, const: 'const' }, 9 | { name: '饮食', y: 900000, const: 'const' } 10 | ]; 11 | 12 | registerPieLable(Chart); 13 | goblin({ 14 | data, 15 | coord: { 16 | type: 'polar', 17 | transposed: true, 18 | radius: 0.75, 19 | }, 20 | pieLabel: { 21 | sidePadding: 40, 22 | label1: function label1(data, color) { 23 | return { 24 | text: data.name, 25 | fill: color 26 | }; 27 | }, 28 | label2: function label2(data) { 29 | return { 30 | text: '￥' + String(Math.floor(data.y * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','), 31 | fill: '#808080', 32 | fontWeight: 'bold' 33 | }; 34 | }, 35 | }, 36 | series: [{ 37 | geom: 'interval', 38 | position: 'const*y', 39 | color: ['name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864']], 40 | adjust: 'stack', 41 | }], 42 | chart: { 43 | id: 'mountNode', 44 | height:240, 45 | pixelRatio: window.devicePixelRatio*2 46 | } 47 | }); 48 | -------------------------------------------------------------------------------- /demo/chart/pie-labelline/react.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from 'react-dom'; 2 | import * as React from 'react'; 3 | import { Chart, Geom, Coord } from '../../../packages/bizgoblin/es'; 4 | import PieLabel from '../../../packages/bizgoblin/es/plugin/PieLabel'; 5 | 6 | const data = [ 7 | { name: '其他消费', y: 6371664, const: 'const' }, 8 | { name: '生活用品', y: 7216301, const: 'const' }, 9 | { name: '通讯物流', y: 1500621, const: 'const' }, 10 | { name: '交通出行', y: 586622, const: 'const' }, 11 | { name: '饮食', y: 900000, const: 'const' } 12 | ]; 13 | 14 | class App extends React.Component<{data?: Array}> { 15 | state = { 16 | height: 240, 17 | width: 375, 18 | pixelRatio: window.devicePixelRatio*2 19 | } 20 | 21 | constructor(props) { 22 | super(props); 23 | } 24 | 25 | render() { 26 | const { height, width, pixelRatio } = this.state; 27 | return ( 28 |
29 | 30 | 31 | 36 | ({ text: data.name, fill: color }) } 39 | label2={data => ({ 40 | text: '￥' + String(Math.floor(data.y * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','), 41 | fill: '#808080', 42 | fontWeight: 'bold' 43 | })} 44 | /> 45 | 46 |
47 | ); 48 | } 49 | } 50 | 51 | ReactDOM.render(, document.getElementById('mount')); 52 | -------------------------------------------------------------------------------- /demo/chart/pie-with-label/json.js: -------------------------------------------------------------------------------- 1 | import goblin, { Chart } from '../../../packages/goblin/lib'; 2 | import registerPieLable from '../../../packages/goblin/lib/plugin/pieLabel'; 3 | 4 | const data = [ 5 | { amount: 20, ratio: 0.1, memo: '学习', const: 'const'}, 6 | { amount: 100, ratio: 0.5, memo: '睡觉', const: 'const'}, 7 | { amount: 10, ratio: 0.05, memo: '吃饭', const: 'const'}, 8 | { amount: 30, ratio: 0.15, memo: '讲礼貌', const: 'const'}, 9 | { amount: 10, ratio: 0.05, memo: '其他', const: 'const' }, 10 | { amount: 20, ratio: 0.1, memo: '运动', const: 'const' }, 11 | { amount: 10, ratio: 0.05, memo: '暂无备注', const: 'const'} 12 | ]; 13 | 14 | registerPieLable(Chart); 15 | goblin({ 16 | data, 17 | coord: { 18 | type: 'polar', 19 | transposed: true, 20 | innerRadius: 0.4, 21 | radius: 0.75 22 | }, 23 | pieLabel: { 24 | sidePadding: 75, 25 | label1: function label1(data) { 26 | return { 27 | text: data.memo, 28 | fill: '#808080' 29 | }; 30 | }, 31 | label2: function label2(data) { 32 | return { 33 | fill: '#000000', 34 | text: '$' + data.amount.toFixed(2), 35 | fontWeight: 500, 36 | fontSize: 10 37 | }; 38 | } 39 | }, 40 | legend: { 41 | position: 'bottom', 42 | align: 'center' 43 | }, 44 | series: [{ 45 | geom: 'interval', 46 | position: 'const*ratio', 47 | color: ['memo', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']], 48 | adjust: 'stack', 49 | }], 50 | chart: { 51 | id: 'mountNode', 52 | height:240, 53 | pixelRatio: window.devicePixelRatio*2 54 | } 55 | }); 56 | -------------------------------------------------------------------------------- /demo/chart/pie-with-label/react.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from 'react-dom'; 2 | import * as React from 'react'; 3 | import { Chart, Geom, Coord, Guide, Legend } from '../../../packages/bizgoblin/es'; 4 | import PieLabel from '../../../packages/bizgoblin/es/plugin/PieLabel'; 5 | 6 | const data = [ 7 | { amount: 20, ratio: 0.1, memo: '学习', const: 'const'}, 8 | { amount: 100, ratio: 0.5, memo: '睡觉', const: 'const'}, 9 | { amount: 10, ratio: 0.05, memo: '吃饭', const: 'const'}, 10 | { amount: 30, ratio: 0.15, memo: '讲礼貌', const: 'const'}, 11 | { amount: 10, ratio: 0.05, memo: '其他', const: 'const' }, 12 | { amount: 20, ratio: 0.1, memo: '运动', const: 'const' }, 13 | { amount: 10, ratio: 0.05, memo: '暂无备注', const: 'const'} 14 | ]; 15 | 16 | class App extends React.Component<{data?: Array}> { 17 | state = { 18 | height: 240, 19 | width: 375, 20 | pixelRatio: window.devicePixelRatio*2 21 | } 22 | 23 | constructor(props) { 24 | super(props); 25 | } 26 | 27 | render() { 28 | const { height, width, pixelRatio } = this.state; 29 | return ( 30 |
31 | 32 | 33 | 38 | 43 | ({ text: data.memo, fill: '#808080' }) } 46 | label2={data => ({ text: '$' + data.amount.toFixed(2), fill: '000000', fontWeight: 500, fontSize: 10 })} 47 | /> 48 | 49 | 50 |
51 | ); 52 | } 53 | } 54 | 55 | ReactDOM.render(, document.getElementById('mount')); 56 | -------------------------------------------------------------------------------- /demo/chart/point-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | gender: "female", 4 | height: 167.5, 5 | weight: 59 6 | }, 7 | { 8 | gender: "female", 9 | height: 159.5, 10 | weight: 49.2 11 | }, 12 | { 13 | gender: "female", 14 | height: 157, 15 | weight: 63 16 | }, 17 | { 18 | gender: "female", 19 | height: 155.8, 20 | weight: 53.6 21 | }, 22 | { 23 | gender: "female", 24 | height: 170, 25 | weight: 59 26 | }, 27 | { 28 | gender: "female", 29 | height: 159.1, 30 | weight: 47.6 31 | }, 32 | { 33 | gender: "female", 34 | height: 166, 35 | weight: 69.8 36 | }, 37 | { 38 | gender: "female", 39 | height: 176.2, 40 | weight: 66.8 41 | }, 42 | { 43 | gender: "female", 44 | height: 160.2, 45 | weight: 75.2 46 | }, 47 | { 48 | gender: "female", 49 | height: 172.5, 50 | weight: 55.2 51 | }, 52 | { 53 | gender: "female", 54 | height: 170.9, 55 | weight: 54.2 56 | }, 57 | { 58 | gender: "female", 59 | height: 172.9, 60 | weight: 62.5 61 | }, 62 | { 63 | gender: "female", 64 | height: 153.4, 65 | weight: 42 66 | }, 67 | { 68 | gender: "female", 69 | height: 160, 70 | weight: 50 71 | }, 72 | { 73 | gender: "female", 74 | height: 147.2, 75 | weight: 49.8 76 | }, 77 | { 78 | gender: "female", 79 | height: 168.2, 80 | weight: 49.2 81 | }, 82 | { 83 | gender: "female", 84 | height: 175, 85 | weight: 73.2 86 | }, 87 | { 88 | gender: "female", 89 | height: 157, 90 | weight: 47.8 91 | }, 92 | { 93 | gender: "female", 94 | height: 167.6, 95 | weight: 68.8 96 | }, 97 | { 98 | gender: "female", 99 | height: 159.5, 100 | weight: 50.6 101 | }, 102 | { 103 | gender: "female", 104 | height: 175, 105 | weight: 82.5 106 | }, 107 | { 108 | gender: "female", 109 | height: 166.8, 110 | weight: 57.2 111 | }, 112 | { 113 | gender: "female", 114 | height: 176.5, 115 | weight: 87.8 116 | }, 117 | { 118 | gender: "female", 119 | height: 170.2, 120 | weight: 72.8 121 | }, 122 | { 123 | gender: "female", 124 | height: 174, 125 | weight: 54.5 126 | }, 127 | { 128 | gender: "female", 129 | height: 173, 130 | weight: 59.8 131 | }, 132 | { 133 | gender: "female", 134 | height: 179.9, 135 | weight: 67.3 136 | }, 137 | { 138 | gender: "female", 139 | height: 170.5, 140 | weight: 67.8 141 | }, 142 | { 143 | gender: "female", 144 | height: 160, 145 | weight: 47 146 | }, 147 | { 148 | gender: "female", 149 | height: 154.4, 150 | weight: 46.2 151 | }, 152 | { 153 | gender: "female", 154 | height: 162, 155 | weight: 55 156 | }, 157 | { 158 | gender: "female", 159 | height: 176.5, 160 | weight: 83 161 | }, 162 | { 163 | gender: "female", 164 | height: 160, 165 | weight: 54.4 166 | }, 167 | { 168 | gender: "female", 169 | height: 152, 170 | weight: 45.8 171 | }, 172 | { 173 | gender: "female", 174 | height: 162.1, 175 | weight: 53.6 176 | }, 177 | { 178 | gender: "female", 179 | height: 170, 180 | weight: 73.2 181 | }, 182 | { 183 | gender: "female", 184 | height: 160.2, 185 | weight: 52.1 186 | }, 187 | { 188 | gender: "female", 189 | height: 161.3, 190 | weight: 67.9 191 | }, 192 | { 193 | gender: "female", 194 | height: 166.4, 195 | weight: 56.6 196 | }, 197 | { 198 | gender: "female", 199 | height: 168.9, 200 | weight: 62.3 201 | }, 202 | { 203 | gender: "female", 204 | height: 163.8, 205 | weight: 58.5 206 | }, 207 | { 208 | gender: "male", 209 | height: 174, 210 | weight: 86.8 211 | }, 212 | { 213 | gender: "male", 214 | height: 174, 215 | weight: 72.2 216 | }, 217 | { 218 | gender: "male", 219 | height: 177, 220 | weight: 71.6 221 | }, 222 | { 223 | gender: "male", 224 | height: 186, 225 | weight: 84.8 226 | }, 227 | { 228 | gender: "male", 229 | height: 167, 230 | weight: 68.2 231 | }, 232 | { 233 | gender: "male", 234 | height: 171.8, 235 | weight: 66.1 236 | }, 237 | { 238 | gender: "male", 239 | height: 182, 240 | weight: 72 241 | }, 242 | { 243 | gender: "male", 244 | height: 167, 245 | weight: 64.6 246 | }, 247 | { 248 | gender: "male", 249 | height: 177.8, 250 | weight: 74.8 251 | }, 252 | { 253 | gender: "male", 254 | height: 164.5, 255 | weight: 70 256 | }, 257 | { 258 | gender: "male", 259 | height: 192, 260 | weight: 101.6 261 | }, 262 | { 263 | gender: "male", 264 | height: 175.5, 265 | weight: 63.2 266 | }, 267 | { 268 | gender: "male", 269 | height: 171.2, 270 | weight: 79.1 271 | }, 272 | { 273 | gender: "male", 274 | height: 181.6, 275 | weight: 78.9 276 | }, 277 | { 278 | gender: "male", 279 | height: 167.4, 280 | weight: 67.7 281 | }, 282 | { 283 | gender: "male", 284 | height: 181.1, 285 | weight: 66 286 | }, 287 | { 288 | gender: "male", 289 | height: 177, 290 | weight: 68.2 291 | }, 292 | { 293 | gender: "male", 294 | height: 174.5, 295 | weight: 63.9 296 | }, 297 | { 298 | gender: "male", 299 | height: 177.5, 300 | weight: 72 301 | }, 302 | { 303 | gender: "male", 304 | height: 170.5, 305 | weight: 56.8 306 | }, 307 | { 308 | gender: "male", 309 | height: 182.4, 310 | weight: 74.5 311 | }, 312 | { 313 | gender: "male", 314 | height: 197.1, 315 | weight: 90.9 316 | }, 317 | { 318 | gender: "male", 319 | height: 180.1, 320 | weight: 93 321 | }, 322 | { 323 | gender: "male", 324 | height: 175.5, 325 | weight: 80.9 326 | }, 327 | { 328 | gender: "male", 329 | height: 180.6, 330 | weight: 72.7 331 | }, 332 | { 333 | gender: "male", 334 | height: 184.4, 335 | weight: 68 336 | }, 337 | { 338 | gender: "male", 339 | height: 175.5, 340 | weight: 70.9 341 | }, 342 | { 343 | gender: "male", 344 | height: 180.6, 345 | weight: 72.5 346 | }, 347 | { 348 | gender: "male", 349 | height: 177, 350 | weight: 72.5 351 | }, 352 | { 353 | gender: "male", 354 | height: 177.1, 355 | weight: 83.4 356 | }, 357 | { 358 | gender: "male", 359 | height: 181.6, 360 | weight: 75.5 361 | }, 362 | { 363 | gender: "male", 364 | height: 176.5, 365 | weight: 73 366 | }, 367 | { 368 | gender: "male", 369 | height: 175, 370 | weight: 70.2 371 | }, 372 | { 373 | gender: "male", 374 | height: 174, 375 | weight: 73.4 376 | }, 377 | { 378 | gender: "male", 379 | height: 165.1, 380 | weight: 70.5 381 | }, 382 | { 383 | gender: "male", 384 | height: 177, 385 | weight: 68.9 386 | }, 387 | { 388 | gender: "male", 389 | height: 192, 390 | weight: 102.3 391 | }, 392 | { 393 | gender: "male", 394 | height: 176.5, 395 | weight: 68.4 396 | }, 397 | { 398 | gender: "male", 399 | height: 169.4, 400 | weight: 65.9 401 | }, 402 | { 403 | gender: "male", 404 | height: 182.1, 405 | weight: 75.7 406 | }, 407 | { 408 | gender: "male", 409 | height: 179.8, 410 | weight: 84.5 411 | }, 412 | { 413 | gender: "male", 414 | height: 175.3, 415 | weight: 87.7 416 | }, 417 | { 418 | gender: "male", 419 | height: 184.9, 420 | weight: 86.4 421 | }, 422 | ]; 423 | export const defs = [{ 424 | dataKey: 'time', 425 | type: 'timeCat', 426 | tickCount: 3 427 | }, { 428 | dataKey: 'tem', 429 | tickCount: 5, 430 | min: 0 431 | }] 432 | -------------------------------------------------------------------------------- /demo/chart/point-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: [{ 7 | dataKey: 'height', 8 | tickCount: 5 9 | }, { 10 | dataKey: 'weight', 11 | tickCount: 5 12 | }], 13 | axis: [{ 14 | dataKey: 'height', 15 | label: function label(text, index, total) { 16 | var textCfg = {}; 17 | if (index === 0) { 18 | textCfg.textAlign = 'left'; 19 | } else if (index === total - 1) { 20 | textCfg.textAlign = 'right'; 21 | } 22 | return textCfg; 23 | } 24 | }], 25 | legend: true, 26 | series: [{ 27 | geom: 'point', 28 | position: 'height*weight', 29 | color: 'gender', 30 | style: { 31 | fillOpacity: 0.65 32 | } 33 | }], 34 | chart: { 35 | id: 'mountNode', 36 | width: 375, 37 | height:240, 38 | pixelRatio: window.devicePixelRatio*2 39 | } 40 | }); 41 | -------------------------------------------------------------------------------- /demo/chart/point-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data } from './data' 5 | 6 | const defs = [{ 7 | dataKey: 'height', 8 | tickCount: 5 9 | }, { 10 | dataKey: 'weight', 11 | tickCount: 5 12 | }] 13 | 14 | function formatLabel (test, index, total) { 15 | const textCfg: any = {}; 16 | if (index === 0) { 17 | textCfg.textAlign = 'left'; 18 | } else if (index === total - 1) { 19 | textCfg.textAlign = 'right'; 20 | } 21 | return textCfg; 22 | } 23 | 24 | class App extends React.Component { 25 | state = { 26 | height:240, 27 | width: 375, 28 | pixelRatio: window.devicePixelRatio*2 29 | } 30 | 31 | constructor(props) { 32 | super(props); 33 | } 34 | 35 | render() { 36 | const { height, width, pixelRatio } = this.state; 37 | return ( 38 |
39 | 40 | 41 | 42 | 43 | 44 |
45 | ); 46 | } 47 | } 48 | 49 | ReactDOM.render(, document.getElementById('mount')); 50 | -------------------------------------------------------------------------------- /demo/chart/point-2/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' }, 3 | { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' }, 4 | { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' }, 5 | { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' }, 6 | { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' }, 7 | { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' }, 8 | { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' }, 9 | { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' }, 10 | { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' }, 11 | { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' }, 12 | { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' }, 13 | { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' }, 14 | { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' }, 15 | { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' }, 16 | { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' } 17 | ]; -------------------------------------------------------------------------------- /demo/chart/point-2/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data } from './data'; 3 | goblin({ 4 | data: data, 5 | defs: [{ 6 | dataKey: 'y', 7 | alias: 'Daily sugar intake', 8 | tickInterval: 50, 9 | nice: false, 10 | max: 165, 11 | min: 0 12 | }, { 13 | dataKey: 'x', 14 | alias: 'Daily fat intake', 15 | tickInterval: 5, 16 | nice: false, 17 | max: 96, 18 | min: 62 19 | }, { 20 | dataKey: 'z', 21 | alias: 'Obesity(adults) %' 22 | }], 23 | axis: [{ 24 | dataKey: 'x', 25 | label: function label(text) { 26 | return { 27 | text: text + ' gr' 28 | }; 29 | }, 30 | grid: { 31 | stroke: '#d9d9d9', 32 | lineWidth: 1, 33 | lineDash: [2, 2] 34 | } 35 | }, { 36 | dataKey: 'y', 37 | label: function label(text) { 38 | if (text > 0) { 39 | return { 40 | text: text + ' gr' 41 | }; 42 | } 43 | } 44 | }], 45 | tooltip: false, 46 | series: [{ 47 | geom: 'point', 48 | position: 'x*y', 49 | size: ['z', [10, 40]], 50 | shape: 'circle', 51 | color: '#1890ff', 52 | style: { 53 | lineWidth: 1, 54 | stroke: '#1890ff', 55 | opacity: 0.3 56 | } 57 | }], 58 | guide: data.map(item => ({ 59 | type: 'text', 60 | position: [item.x, item.y], 61 | content: item.name, 62 | style: { 63 | textAlign: 'center', 64 | fill: '#1890FF', 65 | textBaseline: 'middle' 66 | } 67 | })), 68 | chart: { 69 | id: 'mountNode', 70 | width: 375, 71 | height:240, 72 | pixelRatio: window.devicePixelRatio*2 73 | } 74 | }); -------------------------------------------------------------------------------- /demo/chart/point-2/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Guide } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data } from './data' 5 | 6 | const defs = [{ 7 | dataKey: 'y', 8 | alias: 'Daily sugar intake', 9 | tickInterval: 50, 10 | nice: false, 11 | max: 165, 12 | min: 0 13 | }, { 14 | dataKey: 'x', 15 | alias: 'Daily fat intake', 16 | tickInterval: 5, 17 | nice: false, 18 | max: 96, 19 | min: 62 20 | }, { 21 | dataKey: 'z', 22 | alias: 'Obesity(adults) %' 23 | }] 24 | 25 | class App extends React.Component { 26 | state = { 27 | height: 240, 28 | width: 375, 29 | pixelRatio: window.devicePixelRatio*2 30 | } 31 | 32 | constructor(props) { 33 | super(props); 34 | } 35 | 36 | render() { 37 | const { height, width, pixelRatio } = this.state; 38 | return ( 39 | 40 | ({ text: text + ' gr'})} grid={{ stroke: '#d9d9d9', lineWidth: 1, lineDash: [2, 2]}} /> 41 | {if (text > 0) { return { text: text + ' gr'}; }}} /> 42 | 43 | { data.map((item, index) => )} 52 | 53 | ); 54 | } 55 | } 56 | 57 | ReactDOM.render(, document.getElementById('mount')); 58 | -------------------------------------------------------------------------------- /demo/chart/radar-1/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | item: 'Design', 4 | user: '用户 A', 5 | score: 70 6 | }, { 7 | item: 'Design', 8 | user: '用户 B', 9 | score: 30 10 | }, { 11 | item: 'Development', 12 | user: '用户 A', 13 | score: 60 14 | }, { 15 | item: 'Development', 16 | user: '用户 B', 17 | score: 70 18 | }, { 19 | item: 'Marketing', 20 | user: '用户 A', 21 | score: 50 22 | }, { 23 | item: 'Marketing', 24 | user: '用户 B', 25 | score: 60 26 | }, { 27 | item: 'Users', 28 | user: '用户 A', 29 | score: 40 30 | }, { 31 | item: 'Users', 32 | user: '用户 B', 33 | score: 50 34 | }, { 35 | item: 'Test', 36 | user: '用户 A', 37 | score: 60 38 | }, { 39 | item: 'Test', 40 | user: '用户 B', 41 | score: 70 42 | }, { 43 | item: 'Language', 44 | user: '用户 A', 45 | score: 70 46 | }, { 47 | item: 'Language', 48 | user: '用户 B', 49 | score: 50 50 | }, { 51 | item: 'Technology', 52 | user: '用户 A', 53 | score: 70 54 | }, { 55 | item: 'Technology', 56 | user: '用户 B', 57 | score: 40 58 | }, { 59 | item: 'Support', 60 | user: '用户 A', 61 | score: 60 62 | }, { 63 | item: 'Support', 64 | user: '用户 B', 65 | score: 40 66 | } 67 | ]; 68 | 69 | export const defs = [{ 70 | dataKey: 'score', 71 | min: 0, 72 | max: 120, 73 | nice: false, 74 | tickCount: 4 75 | }] 76 | -------------------------------------------------------------------------------- /demo/chart/radar-1/json.js: -------------------------------------------------------------------------------- 1 | import goblin from '../../../packages/goblin/lib'; 2 | import { data, defs } from './data'; 3 | 4 | goblin({ 5 | data: data, 6 | defs: defs, 7 | axis: [{ 8 | dataKey: 'score', 9 | label: function label(text, index, total) { 10 | if (index === total - 1) { 11 | return null; 12 | } 13 | return { 14 | top: true 15 | }; 16 | }, 17 | grid: { 18 | lineDash: null, 19 | type: 'arc' 20 | } 21 | }, { 22 | dataKey: 'item', 23 | grid: { 24 | lineDash: null 25 | } 26 | }], 27 | legend: true, 28 | coord: { 29 | type: 'polar' 30 | }, 31 | series: [{ 32 | geom: 'line', 33 | position: 'item*score', 34 | color: 'user' 35 | }, { 36 | geom: 'point', 37 | position: 'item*score', 38 | color: 'user', 39 | style: { 40 | stroke: '#fff', 41 | lineWidth: 1 42 | } 43 | }], 44 | chart: { 45 | id: 'mountNode', 46 | width: 375, 47 | height:240, 48 | pixelRatio: window.devicePixelRatio*2 49 | } 50 | }); -------------------------------------------------------------------------------- /demo/chart/radar-1/react.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Axis, Geom, Coord, Legend } from '../../../packages/bizgoblin/lib'; 2 | import * as ReactDOM from 'react-dom'; 3 | import * as React from 'react'; 4 | import { data, defs } from './data' 5 | 6 | function formatLabel (text, index, total) { 7 | if (index === total - 1) { 8 | return null; 9 | } 10 | return { 11 | top: true 12 | }; 13 | } 14 | 15 | class App extends React.Component<{data?: Array}> { 16 | state = { 17 | height:240, 18 | width: 375, 19 | pixelRatio: window.devicePixelRatio*2 20 | } 21 | 22 | constructor(props) { 23 | super(props); 24 | } 25 | 26 | render() { 27 | const { height, width, pixelRatio } = this.state; 28 | return ( 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | ); 40 | } 41 | } 42 | 43 | ReactDOM.render(, document.getElementById('mount')); 44 | -------------------------------------------------------------------------------- /demo/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /demo/config/index.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | // Template version: 1.1.3 4 | // see http://vuejs-templates.github.io/webpack for documentation. 5 | 6 | const path = require('path') 7 | 8 | module.exports = { 9 | build: { 10 | env: require('./prod.env'), 11 | index: path.resolve(__dirname, '../dist/index.html'), 12 | assetsRoot: path.resolve(__dirname, '../dist'), 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: '/', 15 | productionSourceMap: true, 16 | // Gzip off by default as many popular static hosts such as 17 | // Surge or Netlify already gzip all static assets for you. 18 | // Before setting to `true`, make sure to: 19 | // npm install --save-dev compression-webpack-plugin 20 | productionGzip: false, 21 | productionGzipExtensions: ['js', 'css'], 22 | // Run the build command with an extra argument to 23 | // View the bundle analyzer report after build finishes: 24 | // `npm run build --report` 25 | // Set to `true` or `false` to always turn it on or off 26 | bundleAnalyzerReport: process.env.npm_config_report 27 | }, 28 | dev: { 29 | env: require('./dev.env'), 30 | port: process.env.PORT || 8080, 31 | autoOpenBrowser: true, 32 | assetsSubDirectory: 'static', 33 | assetsPublicPath: '/', 34 | proxyTable: {}, 35 | // CSS Sourcemaps off by default because relative paths are "buggy" 36 | // with this option, according to the CSS-Loader README 37 | // (https://github.com/webpack/css-loader#sourcemaps) 38 | // In our experience, they generally work as expected, 39 | // just be aware of this issue when enabling this option. 40 | cssSourceMap: false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /demo/iframe.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | #mountNode { 6 | width: 0; 7 | } -------------------------------------------------------------------------------- /demo/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /demo/iframe.ts: -------------------------------------------------------------------------------- 1 | import * as Touchemulator from 'hammer-touchemulator'; 2 | 3 | declare interface chartType { 4 | type: string, 5 | fileName: string, 6 | } 7 | 8 | function init() { 9 | if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { 10 | Touchemulator(); 11 | } 12 | const params: chartType = { type: '', fileName: ''}; 13 | window.location.search.slice(1).split('&').forEach(param => { 14 | const [ key, value ] = param.split('='); 15 | params[key] = value; 16 | }); 17 | const { fileName, type } = params; 18 | if (['json', 'react'].indexOf(fileName) > -1) { 19 | if (fileName === 'react') { 20 | delete require.cache[`./chart/${type}/${fileName}.tsx`]; 21 | require(`./chart/${type}/${fileName}`); 22 | } else { 23 | delete require.cache[`./chart/${type}/${fileName}.js`]; 24 | require(`./chart/${type}/${fileName}`); 25 | } 26 | } 27 | } 28 | 29 | init(); 30 | -------------------------------------------------------------------------------- /demo/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | body { 6 | height: 100%; 7 | } 8 | 9 | .content { 10 | padding-top: 60px; 11 | height: 100%; 12 | box-sizing: border-box; 13 | display: flex; 14 | } 15 | 16 | #root{ 17 | width: 220px; 18 | height: calc(100% - 60px); 19 | overflow: scroll; 20 | margin: 20px; 21 | } 22 | .chart-item{ 23 | margin-left:20px; 24 | margin-bottom:10px 25 | } 26 | .chart-item div{ 27 | display: inline-block 28 | } 29 | .phone-wrap { 30 | flex: auto; 31 | } 32 | .phone_con { 33 | margin: 20px auto; 34 | background-size: 100% 100%; 35 | background-image: url(http://goh5.luoyefe.com/back/dist/img/phone.svg); 36 | background-repeat: no-repeat; 37 | width: 381px; 38 | height: 656px; 39 | } 40 | .phone_con .phone_screen { 41 | width: 320px; 42 | height: 480px; 43 | position: absolute; 44 | top: 140px; 45 | left: 3px; 46 | background-size: cover; 47 | background-repeat: no-repeat; 48 | } 49 | 50 | .phone_con #phone_title { 51 | position: absolute; 52 | top: 65px; 53 | width: 80%; 54 | left: 10%; 55 | text-align: center; 56 | color: #fff; 57 | overflow: hidden; 58 | white-space: nowrap; 59 | text-overflow: ellipsis; 60 | height: 20px; 61 | font-size: 18px; 62 | } 63 | #nav{ 64 | width: 100%; 65 | height: 60px; 66 | background: #31364a; 67 | position: fixed; 68 | top: 0; 69 | z-index: 99; 70 | } 71 | #nav .item.left { 72 | margin-left: 20px; 73 | font-size: 22px; 74 | } 75 | #nav .item { 76 | color: #fff; 77 | line-height: 60px; 78 | font-size: 12px; 79 | } 80 | #nav a{ 81 | text-decoration: none 82 | } 83 | 84 | #canvas-container { 85 | border: none; 86 | width: 375px; 87 | height: calc(100% - 143px); 88 | margin: 103px 3px 40px 3px; 89 | } -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | goblin 4 | 5 | 6 | 7 | 8 | 12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /demo/index.ts: -------------------------------------------------------------------------------- 1 | import list from './chart/index'; 2 | 3 | function fetchData(state) { 4 | const type = state.type; 5 | const fileName = state.filename; 6 | const desc = state.desc; 7 | document.getElementById('phone_title').innerHTML = desc; 8 | const frameDOM: any = document.getElementById('canvas-container'); 9 | frameDOM.src = `iframe.html?type=${type}&fileName=${fileName}`; 10 | } 11 | 12 | function loadEvents() { 13 | document.addEventListener('click', (e) => { 14 | e.preventDefault(); 15 | if (e.target && (e.target as any).nodeName.toUpperCase() === 'A') { 16 | const el = e.target; 17 | const state = (el as any).dataset; 18 | fetchData(state); 19 | } 20 | }); 21 | } 22 | 23 | function init() { 24 | let temp = ''; 25 | list.map((item: any) => { 26 | let linkTemp = ''; 27 | item.case.forEach((example: any) => { 28 | linkTemp += `${example}`; 29 | }); 30 | temp += 31 | `
32 | ${item.desc} 33 |
${linkTemp}
34 |
`; 35 | }); 36 | 37 | const root = document.getElementById('root'); 38 | root.innerHTML = temp; 39 | loadEvents(); 40 | } 41 | 42 | init(); 43 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "goblin-demo", 3 | "version": "0.1.0", 4 | "description": "goblin demo", 5 | "scripts": { 6 | "start": "node run.js" 7 | }, 8 | "dependencies": { 9 | "react": "^16.8.0", 10 | "react-dom": "^16.8.0" 11 | }, 12 | "devDependencies": { 13 | "@types/node": "^11.11.3", 14 | "@types/react": "^16.8.0", 15 | "@types/react-dom": "^16.8.2", 16 | "babel-core": "^6.26.3", 17 | "babel-loader": "^7.1.5", 18 | "babel-preset-es2015": "^6.24.1", 19 | "babel-preset-react": "^6.24.1", 20 | "colors": "^1.3.3", 21 | "cross-env": "^5.2.0", 22 | "css-loader": "^2.1.1", 23 | "extract-text-webpack-plugin": "^3.0.2", 24 | "hammer-touchemulator": "^0.0.2", 25 | "style-loader": "^0.23.1", 26 | "ts-loader": "^5.3.3", 27 | "tslint": "^5.14.0", 28 | "typescript": "^3.3.0", 29 | "webpack": "^4.29.6", 30 | "webpack-dev-middleware": "^3.6.1", 31 | "webpack-dev-server": "^3.2.1", 32 | "webpack-merge": "^4.2.1" 33 | }, 34 | "engines": { 35 | "node": ">=8" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /demo/run.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var webpackDevServer = require("webpack-dev-server"); 3 | var config = require("./webpack.config.js"); 4 | var compiler = webpack(config); 5 | 6 | var server = new webpackDevServer(compiler, { 7 | publicPath: config.output.publicPath, 8 | noInfo: false, 9 | stats: { colors: true }, 10 | }); 11 | 12 | server.listen(3000); 13 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "jsx": "react", 6 | "moduleResolution": "node", 7 | "noImplicitAny": false, 8 | "removeComments": true, 9 | "preserveConstEnums": true, 10 | "allowJs": true, 11 | "sourceMap": true, 12 | "experimentalDecorators": true, 13 | "emitDecoratorMetadata": true, 14 | "allowSyntheticDefaultImports": true, 15 | "alwaysStrict": true, 16 | "lib": [ 17 | "es2015", 18 | "es2017", 19 | "dom" 20 | ] 21 | }, 22 | "include": [ 23 | "index.ts", "" 24 | ], 25 | "exclude": ["node_modules", "build"] 26 | } 27 | -------------------------------------------------------------------------------- /demo/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('./config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | 6 | exports.assetsPath = function (_path) { 7 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 8 | ? config.build.assetsSubDirectory 9 | : config.dev.assetsSubDirectory 10 | return path.posix.join(assetsSubDirectory, _path) 11 | } 12 | 13 | exports.cssLoaders = function (options) { 14 | options = options || {} 15 | 16 | const cssLoader = { 17 | loader: 'css-loader', 18 | options: { 19 | minimize: process.env.NODE_ENV === 'production', 20 | sourceMap: options.sourceMap 21 | } 22 | } 23 | 24 | // generate loader string to be used with extract text plugin 25 | function generateLoaders(loader, loaderOptions) { 26 | const loaders = [cssLoader] 27 | if (loader) { 28 | loaders.push({ 29 | loader: loader + '-loader', 30 | options: Object.assign({}, loaderOptions, { 31 | sourceMap: options.sourceMap 32 | }) 33 | }) 34 | } 35 | 36 | // Extract CSS when that option is specified 37 | // (which is the case during production build) 38 | if (options.extract) { 39 | return ExtractTextPlugin.extract({ 40 | use: loaders, 41 | fallback: 'vue-style-loader' 42 | }) 43 | } else { 44 | return ['vue-style-loader'].concat(loaders) 45 | } 46 | } 47 | 48 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 49 | return { 50 | css: generateLoaders(), 51 | postcss: generateLoaders(), 52 | less: generateLoaders('less'), 53 | sass: generateLoaders('sass', { indentedSyntax: true }), 54 | scss: generateLoaders('sass'), 55 | stylus: generateLoaders('stylus'), 56 | styl: generateLoaders('stylus') 57 | } 58 | } 59 | 60 | // Generate loaders for standalone style files (outside of .vue) 61 | exports.styleLoaders = function (options) { 62 | const output = [] 63 | const loaders = exports.cssLoaders(options) 64 | for (const extension in loaders) { 65 | const loader = loaders[extension] 66 | output.push({ 67 | test: new RegExp('\\.' + extension + '$'), 68 | use: loader 69 | }) 70 | } 71 | return output 72 | } 73 | -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | context: __dirname, 7 | devtool: '#inline-source-map', 8 | entry: { 9 | index: './index.ts', 10 | frame: './iframe.ts' 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, 'build'), 14 | filename: 'bundle.[name].js', 15 | publicPath: 'http://localhost:3000/build/' 16 | }, 17 | resolve: { 18 | extensions: ['.ts', '.tsx', '.js', '.json'], 19 | alias: { 20 | goblin: path.resolve(__dirname, '../packages/goblin/lib/index'), 21 | // 'goblin-react': path.resolve(__dirname, '../packages/goblin-react/lib/index'), 22 | }, 23 | // modules: [path.resolve(__dirname, '../packages/goblin-ng/node_modules'), 'node_modules'] 24 | }, 25 | module: { 26 | rules: [ 27 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 28 | { test: /\.tsx?$/, loader: 'ts-loader'}, 29 | { test: /\.js?$/, exclude: /(node_modules|packages)/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}} 30 | ] 31 | }, 32 | devServer: { contentBase: '' }, 33 | plugins: [ 34 | new webpack.NamedModulesPlugin(), 35 | ] 36 | }; 37 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "3.13.1", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "version": "independent" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bizgoblin", 3 | "devDependencies": { 4 | "lerna": "^3.13.1" 5 | }, 6 | "version": "0.1.0", 7 | "description": "data vis chart for mobile.", 8 | "scripts": { 9 | "postinstall": "lerna bootstrap", 10 | "pub": "lerna publish" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/alibaba/BizGoblin.git" 15 | }, 16 | "engines": { 17 | "node": ">=8" 18 | }, 19 | "keywords": [ 20 | "f2", 21 | "chart", 22 | "datavis" 23 | ], 24 | "author": "bizgoblin group", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/alibaba/BizGoblin/issues" 28 | }, 29 | "homepage": "https://bizcharts.net/products/bizGoblin" 30 | } 31 | -------------------------------------------------------------------------------- /packages/bizgoblin/.babelrc.js: -------------------------------------------------------------------------------- 1 | const BABEL_ENV = process.env.BABEL_ENV 2 | const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs' 3 | 4 | const plugins = [ 5 | "@babel/plugin-proposal-export-default-from", 6 | "@babel/plugin-proposal-export-namespace-from", 7 | "@babel/plugin-transform-runtime", 8 | ["@babel/plugin-proposal-class-properties", { "loose": true }], 9 | "@babel/plugin-proposal-object-rest-spread", 10 | ]; 11 | 12 | 13 | module.exports = { 14 | plugins: plugins, 15 | presets: [ 16 | [ "@babel/preset-env", { 17 | modules: building ? false : 'commonjs', 18 | targets: { 19 | "browsers": ["last 2 versions"] 20 | } 21 | } ], 22 | '@babel/preset-react' 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /packages/bizgoblin/README.md: -------------------------------------------------------------------------------- 1 | # bizgoblin [![npm](https://img.shields.io/npm/v/bizgoblin.svg)](https://www.npmjs.com/package/bizgoblin) [![Dependency Status](https://david-dm.org/bizgoblinjs/bizgoblin.svg?path=packages/bizgoblin)](https://david-dm.org/bizgoblinjs/bizgoblin.svg?path=packages/bizgoblin) 2 | 3 | ## Install 4 | 5 | ```sh 6 | $ npm install --save bizgoblin 7 | ``` 8 | 9 | ## Usage 10 | 11 | ```jsx 12 | import { Chart, SmoothLine, Point, Tooltip, Legend, Axis } from 'bizgoblin'; 13 | import * as ReactDOM from 'react-dom'; 14 | import * as React from 'react'; 15 | 16 | const data = [ 17 | { month: 'Jan', Tokyo: 7.0, London: 3.9 }, 18 | { month: 'Feb', Tokyo: 6.9, London: 4.2 }, 19 | { month: 'Mar', Tokyo: 9.5, London: 5.7 }, 20 | { month: 'Apr', Tokyo: 14.5, London: 8.5 }, 21 | { month: 'May', Tokyo: 18.4, London: 11.9 }, 22 | { month: 'Jun', Tokyo: 21.5, London: 15.2 }, 23 | { month: 'Jul', Tokyo: 25.2, London: 17.0 }, 24 | { month: 'Aug', Tokyo: 26.5, London: 16.6 }, 25 | { month: 'Sep', Tokyo: 23.3, London: 14.2 }, 26 | { month: 'Oct', Tokyo: 18.3, London: 10.3 }, 27 | { month: 'Nov', Tokyo: 13.9, London: 6.6 }, 28 | { month: 'Dec', Tokyo: 9.6, London: 4.8 } 29 | ]; 30 | 31 | const dataPre = { 32 | transform: [{ 33 | type: 'fold', 34 | fields: ['Tokyo', 'London'], 35 | key: 'city', 36 | value: 'temperature', 37 | }] 38 | }; 39 | 40 | const dataDef = [ 41 | { 42 | key: 'month', 43 | mark: 'column', 44 | scale: { 45 | range: [0, 1], 46 | }, 47 | }, { 48 | key: 'city', 49 | mark: 'color', 50 | scale: {}, 51 | }, { 52 | key: 'temperature', 53 | mark: 'row', 54 | scale: {}, 55 | }, 56 | ]; 57 | 58 | class App extends React.Component { 59 | constructor(props) { 60 | super(props); 61 | } 62 | 63 | render() { 64 | return ( 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 |
73 | ); 74 | } 75 | } 76 | 77 | ReactDOM.render(, document.getElementById('mountNode')); 78 | ``` 79 | -------------------------------------------------------------------------------- /packages/bizgoblin/lib/components/Chart.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); 4 | 5 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); 6 | 7 | Object.defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | exports.default = void 0; 11 | 12 | var React = _interopRequireWildcard(require("react")); 13 | 14 | var PropTypes = _interopRequireWildcard(require("prop-types")); 15 | 16 | var _goblinBase = _interopRequireDefault(require("goblin-base")); 17 | 18 | var __extends = void 0 && (void 0).__extends || function () { 19 | var _extendStatics = function extendStatics(d, b) { 20 | _extendStatics = Object.setPrototypeOf || { 21 | __proto__: [] 22 | } instanceof Array && function (d, b) { 23 | d.__proto__ = b; 24 | } || function (d, b) { 25 | for (var p in b) { 26 | if (b.hasOwnProperty(p)) d[p] = b[p]; 27 | } 28 | }; 29 | 30 | return _extendStatics(d, b); 31 | }; 32 | 33 | return function (d, b) { 34 | _extendStatics(d, b); 35 | 36 | function __() { 37 | this.constructor = d; 38 | } 39 | 40 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 41 | }; 42 | }(); 43 | 44 | var __assign = void 0 && (void 0).__assign || function () { 45 | __assign = Object.assign || function (t) { 46 | for (var s, i = 1, n = arguments.length; i < n; i++) { 47 | s = arguments[i]; 48 | 49 | for (var p in s) { 50 | if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 51 | } 52 | } 53 | 54 | return t; 55 | }; 56 | 57 | return __assign.apply(this, arguments); 58 | }; 59 | 60 | function firstLowerCase(str) { 61 | return str.replace(/^\S/, function (s) { 62 | return s.toLowerCase(); 63 | }); 64 | } 65 | 66 | function retain(obj, attr) { 67 | var newObj = Object.create(null); 68 | 69 | for (var item in obj) { 70 | if (obj.hasOwnProperty(item)) { 71 | var arrAttr = Array.isArray(attr) ? attr : [attr]; 72 | 73 | if (arrAttr.indexOf(item) >= 0) { 74 | newObj[item] = obj[item]; 75 | } 76 | } 77 | } 78 | 79 | return newObj; 80 | } 81 | 82 | function isOwnEmpty(obj) { 83 | for (var name_1 in obj) { 84 | if (obj.hasOwnProperty(name_1)) { 85 | return false; 86 | } 87 | } 88 | 89 | return true; 90 | } 91 | 92 | var Chart = function (_super) { 93 | __extends(Chart, _super); 94 | 95 | function Chart(props) { 96 | var _this = _super.call(this, props) || this; 97 | 98 | _this.windowWidth = 0; 99 | _this.config = {}; 100 | 101 | _this.centralizedUpdates = function (unit) { 102 | var config = _this.config; 103 | var props = unit.props; 104 | var displayName = unit.displayName; 105 | 106 | _this.combineContentConfig(displayName, props, config); 107 | }; 108 | 109 | _this.portalRef = function (el) { 110 | if (!_this.el) { 111 | _this.el = el; 112 | } 113 | }; 114 | 115 | return _this; 116 | } 117 | 118 | Chart.prototype.getChildContext = function () { 119 | return { 120 | centralizedUpdates: this.centralizedUpdates 121 | }; 122 | }; 123 | 124 | Chart.prototype.createChartInstance = function (config) { 125 | if (this.chart) { 126 | this.chart.destroy(); 127 | } 128 | 129 | this.combineChartConfig(this.props, config); 130 | this.combineDataConfig(this.props, config); 131 | this.combineAnimateConfig(this.props, config); 132 | config.chart.el = this.el; 133 | this.chart = (0, _goblinBase.default)(config); 134 | }; 135 | 136 | Chart.prototype.repaintChartInstance = function (config) { 137 | this.combineChartConfig(this.props, config); 138 | this.combineDataConfig(this.props, config); 139 | this.combineAnimateConfig(this.props, config); 140 | config.chart.el = this.el; 141 | 142 | if (this.chart) { 143 | this.chart.repaint(config); 144 | } else { 145 | this.chart = (0, _goblinBase.default)(config); 146 | } 147 | }; 148 | 149 | Chart.prototype.clearConfigData = function () { 150 | this.config = {}; 151 | }; 152 | 153 | Chart.prototype.combineChartConfig = function (props, config) { 154 | var chartRetain = ['height', 'width', 'padding', 'pixelRatio']; 155 | config.chart = retain(props, chartRetain); 156 | }; 157 | 158 | Chart.prototype.combineDataConfig = function (props, config) { 159 | if (props.data) { 160 | config.data = props.data; 161 | } 162 | 163 | if (props.defs) { 164 | config.defs = props.defs; 165 | } 166 | }; 167 | 168 | Chart.prototype.combineAnimateConfig = function (props, config) { 169 | if (props.animate) { 170 | config.animate = props.animate; 171 | } 172 | }; 173 | 174 | Chart.prototype.combineContentConfig = function (displayName, props, config) { 175 | var realName = firstLowerCase(displayName); 176 | var nameLowerCase = displayName.toLowerCase(); 177 | var regSeries = ['line', 'area', 'bar', 'interval', 'point', 'schema']; 178 | 179 | if (regSeries.indexOf(realName) < 0 && isOwnEmpty(props)) { 180 | config[nameLowerCase] = true; 181 | } else if (regSeries.indexOf(realName) >= 0) { 182 | if (!config.series) { 183 | config.series = []; 184 | } 185 | 186 | config.series.push(__assign({ 187 | geom: realName 188 | }, props)); 189 | } else if (nameLowerCase === 'axis') { 190 | if (!config.axis) { 191 | config.axis = []; 192 | } 193 | 194 | config.axis.push(props); 195 | } else if (nameLowerCase === 'series') { 196 | if (!config.series) { 197 | config.series = []; 198 | } 199 | 200 | config.series.push(props); 201 | } else if (nameLowerCase === 'guide') { 202 | if (!config.guide) { 203 | config.guide = []; 204 | } 205 | 206 | config.guide.push(props); 207 | } else if (nameLowerCase === 'pielabel') { 208 | if (!isOwnEmpty(props)) { 209 | config.pieLabel = props; 210 | } 211 | } else { 212 | config[nameLowerCase] = props; 213 | } 214 | 215 | return config; 216 | }; 217 | 218 | Chart.prototype.componentDidMount = function () { 219 | this.windowWidth = window.innerWidth; 220 | this.createChartInstance(this.config); 221 | this.clearConfigData(); 222 | }; 223 | 224 | Chart.prototype.componentDidUpdate = function (prevProps) { 225 | this.repaintChartInstance(this.config); 226 | this.clearConfigData(); 227 | }; 228 | 229 | Chart.prototype.componentWillReceiveProps = function (nextProps) {}; 230 | 231 | Chart.prototype.componentWillUnmount = function () { 232 | if (this.chart) { 233 | this.chart.destroy(); 234 | this.chart = null; 235 | } 236 | 237 | this.el = null; 238 | }; 239 | 240 | Chart.prototype.render = function () { 241 | return React.createElement("canvas", { 242 | ref: this.portalRef 243 | }, this.props.children); 244 | }; 245 | 246 | Chart.childContextTypes = { 247 | centralizedUpdates: PropTypes.func 248 | }; 249 | return Chart; 250 | }(React.Component); 251 | 252 | var _default = Chart; 253 | exports.default = _default; -------------------------------------------------------------------------------- /packages/bizgoblin/lib/components/SubComponent.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.Legend = exports.Tooltip = exports.Geom = exports.Axis = exports.Guide = exports.Coord = void 0; 9 | 10 | var React = _interopRequireWildcard(require("react")); 11 | 12 | var PropTypes = _interopRequireWildcard(require("prop-types")); 13 | 14 | var __extends = void 0 && (void 0).__extends || function () { 15 | var _extendStatics = function extendStatics(d, b) { 16 | _extendStatics = Object.setPrototypeOf || { 17 | __proto__: [] 18 | } instanceof Array && function (d, b) { 19 | d.__proto__ = b; 20 | } || function (d, b) { 21 | for (var p in b) { 22 | if (b.hasOwnProperty(p)) d[p] = b[p]; 23 | } 24 | }; 25 | 26 | return _extendStatics(d, b); 27 | }; 28 | 29 | return function (d, b) { 30 | _extendStatics(d, b); 31 | 32 | function __() { 33 | this.constructor = d; 34 | } 35 | 36 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 37 | }; 38 | }(); 39 | 40 | var Props = function () { 41 | function Props() {} 42 | 43 | return Props; 44 | }(); 45 | 46 | ; 47 | 48 | var SubComponent = function (_super) { 49 | __extends(SubComponent, _super); 50 | 51 | function SubComponent(props) { 52 | var _this = _super.call(this, props) || this; 53 | 54 | _this.displayName = 'SubComponent'; 55 | return _this; 56 | } 57 | 58 | SubComponent.prototype.componentDidMount = function () { 59 | this.context.centralizedUpdates(this); 60 | }; 61 | 62 | SubComponent.prototype.componentDidUpdate = function () { 63 | this.context.centralizedUpdates(this); 64 | }; 65 | 66 | SubComponent.prototype.render = function () { 67 | return null; 68 | }; 69 | 70 | SubComponent.contextTypes = { 71 | centralizedUpdates: PropTypes.func 72 | }; 73 | return SubComponent; 74 | }(React.Component); 75 | 76 | ; 77 | 78 | var Coord = function (_super) { 79 | __extends(Coord, _super); 80 | 81 | function Coord() { 82 | var _this = _super !== null && _super.apply(this, arguments) || this; 83 | 84 | _this.displayName = 'Coord'; 85 | return _this; 86 | } 87 | 88 | return Coord; 89 | }(SubComponent); 90 | 91 | exports.Coord = Coord; 92 | 93 | var Guide = function (_super) { 94 | __extends(Guide, _super); 95 | 96 | function Guide() { 97 | var _this = _super !== null && _super.apply(this, arguments) || this; 98 | 99 | _this.displayName = 'Guide'; 100 | return _this; 101 | } 102 | 103 | return Guide; 104 | }(SubComponent); 105 | 106 | exports.Guide = Guide; 107 | 108 | var Axis = function (_super) { 109 | __extends(Axis, _super); 110 | 111 | function Axis() { 112 | var _this = _super !== null && _super.apply(this, arguments) || this; 113 | 114 | _this.displayName = 'Axis'; 115 | return _this; 116 | } 117 | 118 | return Axis; 119 | }(SubComponent); 120 | 121 | exports.Axis = Axis; 122 | 123 | var Geom = function (_super) { 124 | __extends(Geom, _super); 125 | 126 | function Geom() { 127 | var _this = _super !== null && _super.apply(this, arguments) || this; 128 | 129 | _this.displayName = 'Series'; 130 | return _this; 131 | } 132 | 133 | return Geom; 134 | }(SubComponent); 135 | 136 | exports.Geom = Geom; 137 | 138 | var Tooltip = function (_super) { 139 | __extends(Tooltip, _super); 140 | 141 | function Tooltip() { 142 | var _this = _super !== null && _super.apply(this, arguments) || this; 143 | 144 | _this.displayName = 'Tooltip'; 145 | return _this; 146 | } 147 | 148 | return Tooltip; 149 | }(SubComponent); 150 | 151 | exports.Tooltip = Tooltip; 152 | 153 | var Legend = function (_super) { 154 | __extends(Legend, _super); 155 | 156 | function Legend() { 157 | var _this = _super !== null && _super.apply(this, arguments) || this; 158 | 159 | _this.displayName = 'Legend'; 160 | return _this; 161 | } 162 | 163 | return Legend; 164 | }(SubComponent); 165 | 166 | exports.Legend = Legend; -------------------------------------------------------------------------------- /packages/bizgoblin/lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); 4 | 5 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); 6 | 7 | Object.defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | Object.defineProperty(exports, "Coord", { 11 | enumerable: true, 12 | get: function get() { 13 | return _SubComponent.Coord; 14 | } 15 | }); 16 | Object.defineProperty(exports, "Guide", { 17 | enumerable: true, 18 | get: function get() { 19 | return _SubComponent.Guide; 20 | } 21 | }); 22 | Object.defineProperty(exports, "Axis", { 23 | enumerable: true, 24 | get: function get() { 25 | return _SubComponent.Axis; 26 | } 27 | }); 28 | Object.defineProperty(exports, "Geom", { 29 | enumerable: true, 30 | get: function get() { 31 | return _SubComponent.Geom; 32 | } 33 | }); 34 | Object.defineProperty(exports, "Legend", { 35 | enumerable: true, 36 | get: function get() { 37 | return _SubComponent.Legend; 38 | } 39 | }); 40 | Object.defineProperty(exports, "Tooltip", { 41 | enumerable: true, 42 | get: function get() { 43 | return _SubComponent.Tooltip; 44 | } 45 | }); 46 | Object.defineProperty(exports, "Chart", { 47 | enumerable: true, 48 | get: function get() { 49 | return _Chart.default; 50 | } 51 | }); 52 | exports.Shape = exports.Global = void 0; 53 | 54 | var goblin = _interopRequireWildcard(require("goblin-base")); 55 | 56 | var _SubComponent = require("./components/SubComponent"); 57 | 58 | var _Chart = _interopRequireDefault(require("./components/Chart")); 59 | 60 | var Global = goblin.Global; 61 | exports.Global = Global; 62 | var Shape = goblin.Shape; 63 | exports.Shape = Shape; -------------------------------------------------------------------------------- /packages/bizgoblin/lib/plugin/PieLabel.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); 4 | 5 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); 6 | 7 | Object.defineProperty(exports, "__esModule", { 8 | value: true 9 | }); 10 | exports.default = void 0; 11 | 12 | var React = _interopRequireWildcard(require("react")); 13 | 14 | var PropTypes = _interopRequireWildcard(require("prop-types")); 15 | 16 | var _goblinBase = require("goblin-base"); 17 | 18 | var _pieLabel = _interopRequireDefault(require("goblin-base/es/plugin/pieLabel")); 19 | 20 | var __extends = void 0 && (void 0).__extends || function () { 21 | var _extendStatics = function extendStatics(d, b) { 22 | _extendStatics = Object.setPrototypeOf || { 23 | __proto__: [] 24 | } instanceof Array && function (d, b) { 25 | d.__proto__ = b; 26 | } || function (d, b) { 27 | for (var p in b) { 28 | if (b.hasOwnProperty(p)) d[p] = b[p]; 29 | } 30 | }; 31 | 32 | return _extendStatics(d, b); 33 | }; 34 | 35 | return function (d, b) { 36 | _extendStatics(d, b); 37 | 38 | function __() { 39 | this.constructor = d; 40 | } 41 | 42 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 43 | }; 44 | }(); 45 | 46 | var Props = function () { 47 | function Props() {} 48 | 49 | return Props; 50 | }(); 51 | 52 | ; 53 | 54 | var PieLabel = function (_super) { 55 | __extends(PieLabel, _super); 56 | 57 | function PieLabel(props) { 58 | var _this = _super.call(this, props) || this; 59 | 60 | _this.displayName = 'PieLabel'; 61 | return _this; 62 | } 63 | 64 | PieLabel.prototype.componentDidMount = function () { 65 | (0, _pieLabel.default)(_goblinBase.Chart); 66 | this.context.centralizedUpdates(this); 67 | }; 68 | 69 | PieLabel.prototype.componentDidUpdate = function () { 70 | this.context.centralizedUpdates(this); 71 | }; 72 | 73 | PieLabel.prototype.render = function () { 74 | return null; 75 | }; 76 | 77 | PieLabel.contextTypes = { 78 | centralizedUpdates: PropTypes.func 79 | }; 80 | return PieLabel; 81 | }(React.Component); 82 | 83 | var _default = PieLabel; 84 | exports.default = _default; -------------------------------------------------------------------------------- /packages/bizgoblin/lib/typed/IRChart.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/bizgoblin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bizgoblin", 3 | "version": "0.2.0", 4 | "description": "bizgoblin is react of f2.", 5 | "main": "lib/index.js", 6 | "module": "es/index.js", 7 | "types": "es/index.d.ts", 8 | "scripts": { 9 | "prepublish": "npm run build", 10 | "build": "npm run build:ts && npm run build:cjs && npm run build:umd", 11 | "build:ts": "rimraf es && tsc", 12 | "build:cjs": "rimraf lib && cross-env NODE_ENV=commonjs BABEL_ENV=cjs babel ./es -d lib", 13 | "build:umd": "rimraf umd && cross-env BABEL_ENV=umd webpack --config webpack.config.js", 14 | "clean": "git clean -fdX .", 15 | "lint": "tslint src/**/*", 16 | "analyse": "cross-env NODE_ENV=analyse webpack --progress --config webpack.config.js" 17 | }, 18 | "keywords": [ 19 | "f2", 20 | "charts", 21 | "mobile visualization", 22 | "react", 23 | "data visualization" 24 | ], 25 | "files": [ 26 | "umd", 27 | "es", 28 | "lib" 29 | ], 30 | "author": "bizgoblin group", 31 | "license": "MIT", 32 | "dependencies": { 33 | "@types/node": "^11.11.3", 34 | "@types/prop-types": "^15.7.0", 35 | "goblin-base": "^0.2.0", 36 | "prop-types": "^15.7.2" 37 | }, 38 | "devDependencies": { 39 | "@babel/cli": "^7.2.3", 40 | "@babel/core": "^7.3.4", 41 | "@babel/plugin-proposal-class-properties": "^7.3.4", 42 | "@babel/plugin-proposal-export-default-from": "^7.2.0", 43 | "@babel/plugin-proposal-export-namespace-from": "^7.2.0", 44 | "@babel/plugin-proposal-object-rest-spread": "^7.3.4", 45 | "@babel/plugin-transform-runtime": "^7.3.4", 46 | "@babel/polyfill": "^7.2.5", 47 | "@babel/preset-env": "^7.3.4", 48 | "@babel/preset-react": "^7.0.0", 49 | "@babel/runtime": "^7.3.4", 50 | "@types/node": "^11.11.3", 51 | "@types/react": "^16.8.0", 52 | "@types/react-dom": "^16.8.2", 53 | "babel-loader": "^8.0.5", 54 | "colors": "^1.3.3", 55 | "cross-env": "^5.2.0", 56 | "react": "^16.8.0", 57 | "react-dom": "^16.8.0", 58 | "rimraf": "^2.6.3", 59 | "tslint": "^5.14.0", 60 | "typescript": "^3.3.0", 61 | "webpack": "^4.29.6", 62 | "webpack-bundle-analyzer": "^3.1.0", 63 | "webpack-cli": "^3.3.0" 64 | }, 65 | "peerDependencies": { 66 | "react": "^15.0.0 || ^16.0.0", 67 | "react-dom": "^15.0.0 || ^16.0.0" 68 | }, 69 | "gitHead": "fe630ae3ae1b50cee53cf3978c97b71feda295a5" 70 | } 71 | -------------------------------------------------------------------------------- /packages/bizgoblin/src/components/Chart.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as PropTypes from 'prop-types'; 3 | import goblin from 'goblin-base'; 4 | import IRChart from '../typed/IRChart'; 5 | 6 | function firstLowerCase(str: string) { 7 | return str.replace(/^\S/, (s: any) => { 8 | return s.toLowerCase(); 9 | }); 10 | } 11 | 12 | function retain(obj: any, attr: any) { 13 | const newObj = Object.create(null); 14 | 15 | for (const item in obj) { 16 | if (obj.hasOwnProperty(item)) { 17 | const arrAttr = Array.isArray(attr) ? attr : [attr]; 18 | 19 | if (arrAttr.indexOf(item) >= 0) { 20 | newObj[item] = obj[item]; 21 | } 22 | } 23 | } 24 | 25 | return newObj; 26 | } 27 | 28 | function isOwnEmpty(obj: object) { 29 | for (const name in obj) { 30 | if (obj.hasOwnProperty(name)) { 31 | return false; 32 | } 33 | } 34 | return true; 35 | } 36 | 37 | export default class Chart extends React.Component { 38 | static childContextTypes = { 39 | centralizedUpdates: PropTypes.func 40 | }; 41 | 42 | chart: any; 43 | windowWidth: number = 0; 44 | el: any; 45 | config: any = {}; 46 | 47 | constructor (props: IRChart) { 48 | super(props); 49 | } 50 | 51 | getChildContext() { 52 | return { 53 | centralizedUpdates: this.centralizedUpdates 54 | }; 55 | } 56 | 57 | createChartInstance (config: any) { 58 | if (this.chart) { 59 | this.chart.destroy(); 60 | } 61 | 62 | this.combineChartConfig(this.props, config); 63 | this.combineDataConfig(this.props, config); 64 | this.combineAnimateConfig(this.props, config); 65 | 66 | config.chart.el = this.el; 67 | this.chart = goblin(config); 68 | } 69 | 70 | repaintChartInstance(config: any) { 71 | this.combineChartConfig(this.props, config); 72 | this.combineDataConfig(this.props, config); 73 | this.combineAnimateConfig(this.props, config); 74 | 75 | config.chart.el = this.el; 76 | if (this.chart) { 77 | this.chart.repaint(config); 78 | } else { 79 | this.chart = goblin(config); 80 | } 81 | } 82 | 83 | clearConfigData () { 84 | this.config = {}; 85 | } 86 | 87 | combineChartConfig (props: IRChart, config: any) { 88 | const chartRetain = [ 89 | 'height', 'width', 'padding', 'pixelRatio' 90 | ]; 91 | config.chart = retain(props, chartRetain); 92 | } 93 | 94 | combineDataConfig (props: IRChart, config: any) { 95 | if (props.data) { 96 | config.data = props.data; 97 | } 98 | 99 | if (props.defs) { 100 | config.defs = props.defs; 101 | } 102 | } 103 | 104 | combineAnimateConfig (props: IRChart, config: any) { 105 | if (props.animate) { 106 | config.animate = props.animate; 107 | } 108 | } 109 | 110 | combineContentConfig(displayName: string, props: IRChart, config: any) { 111 | const realName = firstLowerCase(displayName); 112 | const nameLowerCase = displayName.toLowerCase(); 113 | 114 | const regSeries = [ 115 | 'line', 116 | 'area', 117 | 'bar', 118 | 'interval', 119 | 'point', 120 | 'schema', 121 | ]; 122 | 123 | if (regSeries.indexOf(realName) < 0 && isOwnEmpty(props)) { 124 | config[nameLowerCase] = true; 125 | } else if (regSeries.indexOf(realName) >= 0) { 126 | if (!config.series) { 127 | config.series = []; 128 | } 129 | 130 | config.series.push({ 131 | geom: realName, 132 | ...props, 133 | }); 134 | } else if (nameLowerCase === 'axis') { 135 | if (!config.axis) { 136 | config.axis = []; 137 | } 138 | config.axis.push(props); 139 | } else if (nameLowerCase === 'series') { 140 | if (!config.series) { 141 | config.series = []; 142 | } 143 | config.series.push(props); 144 | } else if (nameLowerCase === 'guide') { 145 | if (!config.guide) { 146 | config.guide = []; 147 | } 148 | config.guide.push(props); 149 | } else if (nameLowerCase === 'pielabel') { 150 | if (!isOwnEmpty(props)) { 151 | config.pieLabel = props; 152 | } 153 | } else { 154 | config[nameLowerCase] = props; 155 | } 156 | 157 | return config; 158 | } 159 | 160 | centralizedUpdates = (unit: any) => { 161 | const config = this.config; 162 | const props = unit.props; 163 | const displayName = unit.displayName; 164 | 165 | this.combineContentConfig( 166 | displayName, 167 | props, 168 | config 169 | ); 170 | } 171 | 172 | componentDidMount () { 173 | this.windowWidth = window.innerWidth; 174 | this.createChartInstance(this.config); 175 | this.clearConfigData(); 176 | } 177 | 178 | componentDidUpdate (prevProps: IRChart) { 179 | this.repaintChartInstance(this.config); 180 | this.clearConfigData(); 181 | } 182 | 183 | componentWillReceiveProps (nextProps: IRChart) { 184 | } 185 | 186 | componentWillUnmount () { 187 | if (this.chart) { 188 | this.chart.destroy(); 189 | this.chart = null; 190 | } 191 | this.el = null; 192 | } 193 | 194 | portalRef = (el: any) => { 195 | if (!this.el) { 196 | this.el = el; 197 | } 198 | } 199 | 200 | render () { 201 | return {this.props.children}; 202 | } 203 | } 204 | 205 | -------------------------------------------------------------------------------- /packages/bizgoblin/src/components/SubComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as PropTypes from 'prop-types'; 3 | import { ICoord, IGuide, IAxis, ISeries, ITooltip, ILegend } from 'goblin-base'; 4 | 5 | class Props {}; 6 | 7 | class SubComponent extends React.Component { 8 | static contextTypes = { 9 | centralizedUpdates: PropTypes.func 10 | }; 11 | 12 | displayName = 'SubComponent'; 13 | 14 | constructor(props: Props & T) { 15 | super(props); 16 | } 17 | 18 | componentDidMount () { 19 | this.context.centralizedUpdates(this); 20 | } 21 | 22 | componentDidUpdate () { 23 | this.context.centralizedUpdates(this); 24 | } 25 | 26 | render () { 27 | return null as any; 28 | } 29 | }; 30 | 31 | export class Coord extends SubComponent { displayName = 'Coord'; } 32 | export class Guide extends SubComponent { displayName = 'Guide'; } 33 | export class Axis extends SubComponent { displayName = 'Axis'; } 34 | export class Geom extends SubComponent {displayName = 'Series'; } 35 | export class Tooltip extends SubComponent {displayName = 'Tooltip'; } 36 | export class Legend extends SubComponent {displayName = 'Legend'; } 37 | -------------------------------------------------------------------------------- /packages/bizgoblin/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as goblin from 'goblin-base'; 2 | import { Coord, Guide, Axis, Geom, Legend, Tooltip } from './components/SubComponent'; 3 | 4 | export { default as Chart } from './components/Chart'; 5 | export { Coord, Guide, Axis, Geom, Legend, Tooltip }; 6 | 7 | export const Global = goblin.Global; 8 | export const Shape = goblin.Shape; 9 | 10 | -------------------------------------------------------------------------------- /packages/bizgoblin/src/plugin/PieLabel.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as PropTypes from 'prop-types'; 3 | import { Chart } from 'goblin-base'; 4 | import register, { IPieLabel } from 'goblin-base/es/plugin/pieLabel'; 5 | 6 | class Props {}; 7 | 8 | export default class PieLabel extends React.Component { 9 | static contextTypes = { 10 | centralizedUpdates: PropTypes.func 11 | }; 12 | 13 | displayName = 'PieLabel'; 14 | 15 | constructor(props: Props & IPieLabel) { 16 | super(props); 17 | } 18 | 19 | componentDidMount () { 20 | register(Chart); 21 | this.context.centralizedUpdates(this); 22 | } 23 | 24 | componentDidUpdate () { 25 | this.context.centralizedUpdates(this); 26 | } 27 | 28 | render () { 29 | return null as any; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/bizgoblin/src/typed/IRChart.ts: -------------------------------------------------------------------------------- 1 | import { IChart, IDefs, IAnimate } from 'goblin-base'; 2 | 3 | interface ISChartProps { 4 | data?: any; 5 | defs?: IDefs; 6 | animate?: IAnimate; 7 | } 8 | 9 | type IRChart = IChart & ISChartProps; 10 | 11 | export default IRChart; 12 | -------------------------------------------------------------------------------- /packages/bizgoblin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es2015", 4 | "moduleResolution": "node", 5 | "outDir": "es", 6 | "jsx": "react", 7 | "strict": true, 8 | "noUnusedLocals": true, 9 | "noImplicitAny": true, 10 | "removeComments": true, 11 | "preserveConstEnums": true, 12 | "sourceMap": true, 13 | "declaration": true, 14 | "lib": [ 15 | "dom", 16 | "es5", 17 | "es6", 18 | "scripthost" 19 | ] 20 | }, 21 | "include": [ 22 | "src/**/*" 23 | ], 24 | "exclude": [ 25 | "node_modules" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /packages/bizgoblin/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:latest" 5 | ], 6 | "jsRules": {}, 7 | "rules": { 8 | "quotemark": [true, "single"], 9 | "no-console": [true, "log", "warn"], 10 | "object-literal-sort-keys": false 11 | }, 12 | "rulesDirectory": [] 13 | } 14 | -------------------------------------------------------------------------------- /packages/bizgoblin/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const env = process.env.NODE_ENV; 3 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 4 | 5 | let config = { 6 | mode: 'production', 7 | entry: './lib/index.js', 8 | output: { 9 | path: path.resolve(__dirname, 'umd'), 10 | filename: 'bizgoblin.min.js', 11 | library: 'BizGoblin', 12 | libraryTarget: 'umd', 13 | }, 14 | 15 | resolve: { 16 | extensions: ['.js', '.json'], 17 | }, 18 | 19 | externals: { 20 | 'react': 'React', 21 | 'react-dom': 'ReactDOM', 22 | }, 23 | 24 | module: { 25 | rules: [{ 26 | test: /\.js?$/, 27 | exclude: /node_modules/, 28 | use: { 29 | loader: "babel-loader" 30 | } 31 | }], 32 | }, 33 | 34 | plugins: [], 35 | }; 36 | 37 | if (env === 'analyse') { 38 | config.plugins.push(new BundleAnalyzerPlugin()); 39 | } 40 | 41 | module.exports = config; 42 | -------------------------------------------------------------------------------- /packages/goblin/.babelrc.js: -------------------------------------------------------------------------------- 1 | const BABEL_ENV = process.env.BABEL_ENV 2 | const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs' 3 | 4 | const plugins = [ 5 | "@babel/plugin-proposal-export-default-from", 6 | "@babel/plugin-proposal-export-namespace-from", 7 | "@babel/plugin-transform-runtime", 8 | ["@babel/plugin-proposal-class-properties", { "loose": true }], 9 | "@babel/plugin-proposal-object-rest-spread", 10 | ]; 11 | 12 | module.exports = { 13 | plugins: plugins, 14 | presets: [ 15 | [ "@babel/preset-env", { 16 | modules: building ? false : 'commonjs', 17 | targets: { 18 | "browsers": ["last 2 versions"] 19 | } 20 | } ] 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /packages/goblin/README.md: -------------------------------------------------------------------------------- 1 | # goblin-base [![npm](https://img.shields.io/npm/v/goblin-base.svg)](https://www.npmjs.com/package/goblin-base) [![Dependency Status](https://david-dm.org/goblin-basejs/goblin-base.svg?path=packages/goblin-base)](https://david-dm.org/goblin-basejs/goblin-base.svg?path=packages/goblin-base) 2 | 3 | > A toolkit fit for data vis engineer. 4 | 5 | ## Install 6 | 7 | ```sh 8 | $ tnpm install --save goblin-base 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import goblin from 'goblin-base'; 15 | 16 | const data = [ 17 | { time: '周一', tem: 6.9, rain: 10 }, 18 | { time: '周二', tem: 9.5, rain: 13 }, 19 | { time: '周三', tem: 14.5, rain: 14 }, 20 | { time: '周四', tem: 18.2, rain: 10 }, 21 | { time: '周五', tem: 21.5, rain: 12 }, 22 | { time: '周六', tem: 25.2, rain: 16 }, 23 | { time: '周日', tem: 26.5, rain: 13 } 24 | ]; 25 | 26 | const defs = [{ 27 | dataKey: 'tem', 28 | tickCount: 5, 29 | max: 30, 30 | min: 0 31 | }, { 32 | dataKey: 'rain', 33 | tickCount: 5, 34 | max: 30, 35 | min: 0 36 | }]; 37 | 38 | goblin({ 39 | data: data, 40 | defs: defs, 41 | axis: [{ 42 | dataKey: 'time', 43 | label: { 44 | fontSize: 14 45 | }, 46 | grid: null, 47 | }, { 48 | dataKey: 'tem', 49 | label: { 50 | fontSize: 14 51 | } 52 | }, { 53 | dataKey: 'rain', 54 | label: { 55 | fontSize: 14 56 | } 57 | }], 58 | series: [{ 59 | geom: 'interval', 60 | position: 'time*tem' 61 | }, { 62 | geom: 'line', 63 | position: 'time*rain', 64 | color: '#5ed470', 65 | size: 2, 66 | shape: 'smooth' 67 | }, { 68 | geom: 'point', 69 | position: 'time*rain', 70 | color: '#5ed470' 71 | }], 72 | chart: { 73 | id: 'mountNode', 74 | width:320, 75 | height:240, 76 | pixelRatio: 2 77 | } 78 | }); 79 | ``` 80 | -------------------------------------------------------------------------------- /packages/goblin/lib/components/setAnimateConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | var process = function process(chart, config) { 11 | var animate = _Commom.Util.deepClone(config.animate); 12 | 13 | if (_Commom.Util.isBoolean(animate)) { 14 | return chart.animate(animate); 15 | } 16 | 17 | if (!_Commom.Util.isEmpty(animate)) { 18 | return chart.animate(animate); 19 | } 20 | 21 | return chart; 22 | }; 23 | 24 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setAxisConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | var process = function process(chart, config) { 11 | var cAxis = _Commom.Util.deepClone(config.axis); 12 | 13 | var isArr = _Commom.Util.isArray(cAxis); 14 | 15 | if (_Commom.Util.isNil(cAxis) || cAxis === false || isArr && cAxis.length === 0) { 16 | return chart.axis(false); 17 | } 18 | 19 | if (cAxis === true) { 20 | return chart.axis(true); 21 | } 22 | 23 | var arrAxis = isArr ? cAxis : [cAxis]; 24 | 25 | for (var _i = 0, arrAxis_1 = arrAxis; _i < arrAxis_1.length; _i++) { 26 | var res = arrAxis_1[_i]; 27 | 28 | if (res.dataKey) { 29 | if (res.show === false) { 30 | chart.axis(res.dataKey, false); 31 | } else { 32 | var options = _Commom.Util.omit(res, ['show', 'dataKey']); 33 | 34 | chart.axis(res.dataKey, options); 35 | } 36 | } else { 37 | chart.axis(res); 38 | } 39 | } 40 | 41 | return chart; 42 | }; 43 | 44 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setCoordConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | var process = function process(chart, config) { 11 | var cCoord = _Commom.Util.deepClone(config.coord); 12 | 13 | if (!cCoord) { 14 | return chart.coord('rect'); 15 | } 16 | 17 | var type = cCoord.type || 'rect'; 18 | 19 | var options = _Commom.Util.omit(cCoord, ['type']); 20 | 21 | return chart.coord(type, options); 22 | }; 23 | 24 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setDataConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | var process = function process(chart, config) { 11 | var cDefs = _Commom.Util.deepClone(config.defs); 12 | 13 | var isArr = _Commom.Util.isArray(cDefs); 14 | 15 | var options = {}; 16 | 17 | if (!_Commom.Util.isEmpty(cDefs)) { 18 | var arrDefs = isArr ? cDefs : [cDefs]; 19 | 20 | for (var _i = 0, arrDefs_1 = arrDefs; _i < arrDefs_1.length; _i++) { 21 | var res = arrDefs_1[_i]; 22 | 23 | if (res.dataKey) { 24 | var currOption = _Commom.Util.omit(res, 'dataKey'); 25 | 26 | options[res.dataKey] = currOption; 27 | } 28 | } 29 | } 30 | 31 | if (_Commom.Util.isEmpty(config.data)) { 32 | config.data = []; 33 | } 34 | 35 | if (!_Commom.Util.isEmpty(config.series)) { 36 | var cData = _Commom.Util.deepClone(config.data); 37 | 38 | var arrData = _Commom.Util.isArray(cData) ? cData : [cData]; 39 | chart.source(arrData, options); 40 | } 41 | }; 42 | 43 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setGuideConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | var __assign = void 0 && (void 0).__assign || function () { 11 | __assign = Object.assign || function (t) { 12 | for (var s, i = 1, n = arguments.length; i < n; i++) { 13 | s = arguments[i]; 14 | 15 | for (var p in s) { 16 | if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 17 | } 18 | } 19 | 20 | return t; 21 | }; 22 | 23 | return __assign.apply(this, arguments); 24 | }; 25 | 26 | function setGuideLine(chart, item) { 27 | var newItem = _Commom.Util.omit(item, ['type']); 28 | 29 | chart.guide().line(__assign({}, newItem)); 30 | } 31 | 32 | function setGuideTag(chart, item) { 33 | var newItem = _Commom.Util.omit(item, ['type']); 34 | 35 | chart.guide().tag(__assign({}, newItem)); 36 | } 37 | 38 | function setGuideArc(chart, item) { 39 | if (item.quickType === 'parallel') { 40 | var data = item.data; 41 | chart.guide().arc(__assign({ 42 | start: ['min', data], 43 | end: ['max', data] 44 | }, item)); 45 | chart.guide().arc(__assign({ 46 | start: ['max', data], 47 | end: ['min', data] 48 | }, item)); 49 | } else if (item.quickType === 'normal') { 50 | var data = item.data; 51 | chart.guide().line(__assign({ 52 | start: [data, 'min'], 53 | end: [data, 'max'] 54 | }, item)); 55 | } else { 56 | var newItem = _Commom.Util.omit(item, ['type']); 57 | 58 | chart.guide().arc(__assign({}, newItem)); 59 | } 60 | } 61 | 62 | function setGuideText(chart, item) { 63 | var newItem = _Commom.Util.omit(item, ['type']); 64 | 65 | chart.guide().text(__assign({}, newItem)); 66 | } 67 | 68 | function setGuideHtml(chart, item) { 69 | var newItem = _Commom.Util.omit(item, ['type']); 70 | 71 | chart.guide().html(__assign({}, newItem)); 72 | } 73 | 74 | function setGuideRect(chart, item) { 75 | var newItem = _Commom.Util.omit(item, ['type']); 76 | 77 | chart.guide().rect(__assign({}, newItem)); 78 | } 79 | 80 | var process = function process(chart, config) { 81 | var cGuide = _Commom.Util.deepClone(config.guide); 82 | 83 | var isArr = _Commom.Util.isArray(cGuide); 84 | 85 | if (_Commom.Util.isNil(cGuide) || _Commom.Util.isEmpty(cGuide)) { 86 | return; 87 | } 88 | 89 | var arrGuide = isArr ? cGuide : [cGuide]; 90 | chart.guide().clear(); 91 | arrGuide.forEach(function (res) { 92 | if (res.type === 'line') { 93 | setGuideLine(chart, res); 94 | } else if (res.type === 'text') { 95 | setGuideText(chart, res); 96 | } else if (res.type === 'tag') { 97 | setGuideTag(chart, res); 98 | } else if (res.type === 'rect') { 99 | setGuideRect(chart, res); 100 | } else if (res.type === 'arc') { 101 | setGuideArc(chart, res); 102 | } else if (res.type === 'html') { 103 | setGuideHtml(chart, res); 104 | } 105 | }); 106 | }; 107 | 108 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setLegendConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | function setEvent(options, chart) { 11 | if (options.onClick) { 12 | var newOptions = _Commom.Util.omit(options, ['onClick']); 13 | 14 | newOptions.onClick = function (event) { 15 | options.onClick(event, chart); 16 | }; 17 | 18 | return newOptions; 19 | } 20 | 21 | return options; 22 | } 23 | 24 | var process = function process(chart, config) { 25 | var cLegend = _Commom.Util.deepClone(config.legend); 26 | 27 | var isArr = _Commom.Util.isArray(cLegend); 28 | 29 | if (_Commom.Util.isNil(cLegend) || cLegend === false || isArr && cLegend.length === 0 || cLegend.show === false) { 30 | return chart.legend(false); 31 | } 32 | 33 | if (cLegend.show) { 34 | return chart.legend(true); 35 | } 36 | 37 | var arrLegend = isArr ? cLegend : [cLegend]; 38 | 39 | for (var _i = 0, arrLegend_1 = arrLegend; _i < arrLegend_1.length; _i++) { 40 | var res = arrLegend_1[_i]; 41 | 42 | if (res.dataKey) { 43 | if (res.show === false) { 44 | chart.legend(res.dataKey, false); 45 | } else { 46 | var options = _Commom.Util.omit(res, ['show', 'dataKey']); 47 | 48 | chart.legend(res.dataKey, setEvent(options, chart)); 49 | } 50 | } else { 51 | chart.legend(setEvent(res, chart)); 52 | } 53 | } 54 | 55 | return chart; 56 | }; 57 | 58 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setPieLabelConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | function setEvent(options, chart) { 11 | var newOptions = _Commom.Util.omit(options, ['onClick']); 12 | 13 | if (options.onClick) { 14 | newOptions.onClick = function (obj) { 15 | options.onClick(obj, chart); 16 | }; 17 | } 18 | 19 | return newOptions; 20 | } 21 | 22 | var process = function process(chart, config) { 23 | var cPieLabel = _Commom.Util.deepClone(config.pieLabel); 24 | 25 | if (_Commom.Util.isNil(cPieLabel)) { 26 | return; 27 | } 28 | 29 | return chart.pieLabel(setEvent(cPieLabel, chart)); 30 | }; 31 | 32 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setSeriesConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | function setSeriesGeom(chart, currSeries) { 11 | var geom = currSeries.geom; 12 | var geomObj; 13 | 14 | switch (geom) { 15 | case 'path': 16 | geomObj = chart.path(); 17 | break; 18 | 19 | case 'line': 20 | geomObj = chart.line(); 21 | break; 22 | 23 | case 'area': 24 | geomObj = chart.area(); 25 | break; 26 | 27 | case 'bar': 28 | case 'interval': 29 | geomObj = chart.interval(); 30 | break; 31 | 32 | case 'point': 33 | geomObj = chart.point(); 34 | break; 35 | 36 | case 'schema': 37 | geomObj = chart.schema(); 38 | break; 39 | 40 | case 'polygon': 41 | geomObj = chart.polygon(); 42 | break; 43 | 44 | default: 45 | geomObj = chart.line(); 46 | } 47 | 48 | return geomObj; 49 | } 50 | 51 | function setSeriesPosition(chart, currSeries) { 52 | var position = currSeries.position; 53 | 54 | if (!_Commom.Util.isNil(position)) { 55 | return chart.position(position); 56 | } 57 | 58 | return chart; 59 | } 60 | 61 | function setSeriesAdjust(chart, currSeries) { 62 | var adjust = currSeries.adjust; 63 | 64 | if (!_Commom.Util.isNil(adjust)) { 65 | return chart.adjust(adjust); 66 | } 67 | 68 | return chart; 69 | } 70 | 71 | function setSeriesShape(chart, currSeries) { 72 | var shape = currSeries.shape; 73 | 74 | if (_Commom.Util.isString(shape)) { 75 | return chart.shape(shape); 76 | } 77 | 78 | if (_Commom.Util.isArray(shape) && shape.length >= 1) { 79 | if (shape[1]) { 80 | return chart.shape(shape[0], shape[1]); 81 | } 82 | 83 | return chart.shape(shape[0]); 84 | } 85 | 86 | return chart; 87 | } 88 | 89 | function setSeriesColor(chart, currSeries) { 90 | var color = currSeries.color; 91 | 92 | if (_Commom.Util.isString(color)) { 93 | return chart.color(color); 94 | } 95 | 96 | if (_Commom.Util.isArray(color) && color.length >= 1) { 97 | if (color[1]) { 98 | return chart.color(color[0], color[1]); 99 | } 100 | 101 | return chart.color(color[0]); 102 | } 103 | 104 | return chart; 105 | } 106 | 107 | function setSeriesSize(chart, currSeries) { 108 | var size = currSeries.size; 109 | 110 | if (_Commom.Util.isNumber(size) || _Commom.Util.isString(size)) { 111 | return chart.size(size); 112 | } 113 | 114 | if (_Commom.Util.isArray(size) && size.length >= 1) { 115 | if (size[1]) { 116 | return chart.size(size[0], size[1]); 117 | } 118 | 119 | return chart.size(size[0]); 120 | } 121 | 122 | return chart; 123 | } 124 | 125 | function setSeriesStyle(chart, currSeries) { 126 | var style = currSeries.style; 127 | 128 | if (_Commom.Util.isArray(style) && style.length >= 1) { 129 | if (style[1]) { 130 | return chart.style(style[0], style[1]); 131 | } 132 | 133 | return chart.style(style[0]); 134 | } 135 | 136 | if (_Commom.Util.isPlainObject(style)) { 137 | return chart.style(style); 138 | } 139 | 140 | return chart; 141 | } 142 | 143 | var process = function process(chart, config) { 144 | var cSeries = _Commom.Util.deepClone(config.series); 145 | 146 | var isArr = _Commom.Util.isArray(cSeries); 147 | 148 | if (_Commom.Util.isNil(cSeries) || _Commom.Util.isEmpty(cSeries)) { 149 | return chart; 150 | } 151 | 152 | var arrSeries = isArr ? cSeries : [cSeries]; 153 | var chartInstance; 154 | arrSeries.forEach(function (currSeries) { 155 | chartInstance = setSeriesGeom(chart, currSeries); 156 | chartInstance = setSeriesPosition(chartInstance, currSeries); 157 | chartInstance = setSeriesColor(chartInstance, currSeries); 158 | chartInstance = setSeriesSize(chartInstance, currSeries); 159 | chartInstance = setSeriesShape(chartInstance, currSeries); 160 | chartInstance = setSeriesAdjust(chartInstance, currSeries); 161 | chartInstance = setSeriesStyle(chartInstance, currSeries); 162 | }); 163 | return chartInstance; 164 | }; 165 | 166 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/components/setTooltipConfig.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.process = void 0; 7 | 8 | var _Commom = require("../utils/Commom"); 9 | 10 | function setEvent(options, chart) { 11 | var newOptions = _Commom.Util.omit(options, ['onChange', 'onHide', 'onShow']); 12 | 13 | if (options.onChange) { 14 | newOptions.onChange = function (obj) { 15 | options.onChange(obj, chart); 16 | }; 17 | } 18 | 19 | if (options.onHide) { 20 | newOptions.onHide = function (obj) { 21 | options.onHide(obj, chart); 22 | }; 23 | } 24 | 25 | if (options.onShow) { 26 | newOptions.onShow = function (obj) { 27 | options.onShow(obj, chart); 28 | }; 29 | } 30 | 31 | return newOptions; 32 | } 33 | 34 | var process = function process(chart, config) { 35 | var cTooltip = _Commom.Util.deepClone(config.tooltip); 36 | 37 | if (_Commom.Util.isNil(cTooltip) || cTooltip === false || cTooltip.show === false) { 38 | return chart.tooltip(false); 39 | } 40 | 41 | var options = _Commom.Util.omit(cTooltip, ['show']); 42 | 43 | return chart.tooltip(setEvent(options, chart)); 44 | }; 45 | 46 | exports.process = process; -------------------------------------------------------------------------------- /packages/goblin/lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.default = _default; 9 | exports.Chart = exports.Shape = exports.Global = void 0; 10 | 11 | var _CommonChart = _interopRequireDefault(require("./core/CommonChart")); 12 | 13 | var _Commom = require("./utils/Commom"); 14 | 15 | var F2 = require('@antv/f2'); 16 | 17 | var Global = F2.Global; 18 | exports.Global = Global; 19 | var Shape = F2.Shape; 20 | exports.Shape = Shape; 21 | var Chart = F2.Chart; 22 | exports.Chart = Chart; 23 | 24 | function _default(config) { 25 | if (_Commom.Util.isNil(config) || _Commom.Util.isEmpty(config)) { 26 | return; 27 | } 28 | 29 | var commonChart = new _CommonChart.default(config); 30 | commonChart.render(); 31 | return commonChart; 32 | } -------------------------------------------------------------------------------- /packages/goblin/lib/plugin/pieLabel.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = _default; 7 | 8 | var PieLabel = require('@antv/f2/lib/plugin/pie-label'); 9 | 10 | function _default(Chart) { 11 | Chart.plugins.register(PieLabel); 12 | } 13 | 14 | ; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IAnimate.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IAxis.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IChart.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/ICommon.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/ICoord.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IDefs.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IGuide.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/ILegend.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IMain.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/IPieLabel.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/ISeries.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /packages/goblin/lib/typed/ITooltip.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | ; -------------------------------------------------------------------------------- /packages/goblin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "goblin-base", 3 | "version": "0.2.0", 4 | "description": "goblin-base is a toolkit fit for data vis engineer.", 5 | "main": "lib/index.js", 6 | "module": "es/index.js", 7 | "types": "es/index.d.ts", 8 | "scripts": { 9 | "build": "npm run build:ts && npm run build:cjs && npm run build:umd", 10 | "build:ts": "rimraf es && tsc", 11 | "build:cjs": "rimraf lib && cross-env NODE_ENV=commonjs BABEL_ENV=cjs babel ./es -d lib", 12 | "build:umd": "rimraf umd && cross-env BABEL_ENV=umd webpack --config webpack.config.js", 13 | "clean": "git clean -fdX .", 14 | "lint": "tslint src/**/*", 15 | "analyse": "cross-env NODE_ENV=analyse webpack --progress --config webpack.config.js" 16 | }, 17 | "keywords": [ 18 | "f2", 19 | "mobile", 20 | "charts", 21 | "data visualization" 22 | ], 23 | "files": [ 24 | "umd", 25 | "es", 26 | "lib" 27 | ], 28 | "author": "bizgoblin group", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "@babel/cli": "^7.2.3", 32 | "@babel/core": "^7.3.4", 33 | "@babel/plugin-external-helpers": "^7.2.0", 34 | "@babel/plugin-proposal-class-properties": "^7.3.4", 35 | "@babel/plugin-proposal-export-default-from": "^7.2.0", 36 | "@babel/plugin-proposal-export-namespace-from": "^7.2.0", 37 | "@babel/plugin-proposal-object-rest-spread": "^7.3.4", 38 | "@babel/plugin-transform-runtime": "^7.3.4", 39 | "@babel/polyfill": "^7.2.5", 40 | "@babel/preset-env": "^7.3.4", 41 | "@babel/runtime": "^7.3.4", 42 | "babel-loader": "^8.0.5", 43 | "colors": "^1.3.3", 44 | "cross-env": "^5.2.0", 45 | "gzip-size": "^5.0.0", 46 | "ora": "^3.2.0", 47 | "pretty-bytes": "^5.1.0", 48 | "rimraf": "^2.6.3", 49 | "tslint": "^5.14.0", 50 | "typescript": "^3.3.0", 51 | "webpack": "^4.29.6", 52 | "webpack-bundle-analyzer": "^3.1.0", 53 | "webpack-cli": "^3.3.0" 54 | }, 55 | "dependencies": { 56 | "@antv/f2": "3.4.0", 57 | "@types/node": "^11.11.3" 58 | }, 59 | "gitHead": "fe630ae3ae1b50cee53cf3978c97b71feda295a5" 60 | } 61 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setAnimateConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | export const process = (chart: any, config: any) => { 4 | const animate = Util.deepClone(config.animate); 5 | 6 | if (Util.isBoolean(animate)) { 7 | return chart.animate(animate); 8 | } 9 | 10 | if (!Util.isEmpty(animate)) { 11 | return chart.animate(animate); 12 | } 13 | 14 | return chart; 15 | }; -------------------------------------------------------------------------------- /packages/goblin/src/components/setAxisConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | export const process = (chart: any, config: any) => { 4 | const cAxis = Util.deepClone(config.axis); 5 | const isArr = Util.isArray(cAxis); 6 | 7 | if (Util.isNil(cAxis) || cAxis === false || (isArr && cAxis.length === 0)) { 8 | return chart.axis(false); 9 | } 10 | 11 | if (cAxis === true) { 12 | return chart.axis(true); 13 | } 14 | 15 | const arrAxis = isArr ? cAxis : [cAxis]; 16 | for (let res of arrAxis) { 17 | if (res.dataKey) { 18 | if (res.show === false) { 19 | chart.axis(res.dataKey, false); 20 | } else { 21 | const options = Util.omit(res, ['show', 'dataKey']); 22 | chart.axis(res.dataKey, options); 23 | } 24 | } else { 25 | chart.axis(res); 26 | } 27 | } 28 | return chart; 29 | } 30 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setCoordConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | export const process = (chart: any, config: any) => { 4 | const cCoord = Util.deepClone(config.coord); 5 | 6 | if (!cCoord) { 7 | return chart.coord('rect'); 8 | } 9 | 10 | const type = cCoord.type || 'rect'; 11 | 12 | const options = Util.omit(cCoord, ['type']); 13 | 14 | return chart.coord(type, options); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setDataConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | export const process = (chart: any, config: any) => { 4 | const cDefs = Util.deepClone(config.defs); 5 | let isArr = Util.isArray(cDefs); 6 | 7 | let options: any = {}; 8 | if (!Util.isEmpty(cDefs)) { 9 | const arrDefs = isArr ? cDefs : [cDefs]; 10 | 11 | for (const res of arrDefs) { 12 | if (res.dataKey) { 13 | const currOption = Util.omit(res, 'dataKey'); 14 | options[res.dataKey] = currOption; 15 | } 16 | } 17 | } 18 | 19 | if (Util.isEmpty(config.data)) { 20 | config.data = []; 21 | } 22 | if (!Util.isEmpty(config.series)) { 23 | const cData = Util.deepClone(config.data); 24 | const arrData = Util.isArray(cData) ? cData : [cData]; 25 | chart.source(arrData, options); 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setGuideConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | function setGuideLine(chart: any, item: any) { 4 | const newItem = Util.omit(item, ['type']) 5 | chart.guide().line({ ...newItem }) 6 | } 7 | 8 | function setGuideTag (chart: any, item: any) { 9 | const newItem = Util.omit(item, ['type']) 10 | chart.guide().tag({ ...newItem }) 11 | } 12 | 13 | function setGuideArc(chart: any, item: any) { 14 | if (item.quickType === 'parallel') { 15 | const data = item.data; 16 | chart.guide().arc({ 17 | start: ['min', data], 18 | end: ['max', data], 19 | ...item, 20 | }); 21 | chart.guide().arc({ 22 | start: ['max', data], 23 | end: ['min', data], 24 | ...item, 25 | }); 26 | } else if (item.quickType === 'normal') { 27 | const data = item.data; 28 | chart.guide().line({ 29 | start: [data, 'min'], 30 | end: [data, 'max'], 31 | ...item, 32 | }); 33 | } else { 34 | const newItem = Util.omit(item, ['type']) 35 | chart.guide().arc({ ...newItem }) 36 | } 37 | } 38 | 39 | function setGuideText (chart: any, item: any) { 40 | const newItem = Util.omit(item, ['type']) 41 | chart.guide().text({ ...newItem }) 42 | } 43 | 44 | function setGuideHtml (chart: any, item: any) { 45 | const newItem = Util.omit(item, ['type']) 46 | chart.guide().html({ ...newItem }) 47 | } 48 | 49 | function setGuideRect (chart: any, item: any) { 50 | const newItem = Util.omit(item, ['type']) 51 | chart.guide().rect({ ...newItem }) 52 | } 53 | 54 | export const process = (chart: any, config: any) => { 55 | const cGuide = Util.deepClone(config.guide); 56 | const isArr = Util.isArray(cGuide); 57 | 58 | if (Util.isNil(cGuide) || Util.isEmpty(cGuide)) { return; } 59 | 60 | const arrGuide = isArr ? cGuide: [cGuide]; 61 | 62 | // 清空 guides 63 | chart.guide().clear(); 64 | 65 | arrGuide.forEach((res: any) => { 66 | if (res.type === 'line') { 67 | setGuideLine(chart, res); 68 | } else if (res.type === 'text') { 69 | setGuideText(chart, res); 70 | } else if (res.type === 'tag') { 71 | setGuideTag(chart, res); 72 | } else if (res.type === 'rect') { 73 | setGuideRect(chart, res); 74 | } else if (res.type === 'arc') { 75 | setGuideArc(chart, res); 76 | } else if (res.type === 'html') { 77 | setGuideHtml(chart, res); 78 | } 79 | }) 80 | } -------------------------------------------------------------------------------- /packages/goblin/src/components/setLegendConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | function setEvent (options: any, chart: any) { 4 | if (options.onClick) { 5 | const newOptions = Util.omit(options, ['onClick']); 6 | newOptions.onClick = function (event: any) { 7 | options.onClick(event, chart); 8 | } 9 | return newOptions; 10 | } 11 | return options; 12 | } 13 | 14 | export const process = (chart: any, config: any) => { 15 | const cLegend = Util.deepClone(config.legend); 16 | const isArr = Util.isArray(cLegend); 17 | 18 | if (Util.isNil(cLegend) || cLegend === false || (isArr && cLegend.length === 0) || cLegend.show === false) { 19 | return chart.legend(false); 20 | } 21 | 22 | if (cLegend.show) { 23 | return chart.legend(true) 24 | } 25 | 26 | const arrLegend = isArr ? cLegend : [cLegend]; 27 | 28 | for (let res of arrLegend) { 29 | if (res.dataKey) { 30 | if (res.show === false) { 31 | chart.legend(res.dataKey, false); 32 | } else { 33 | const options = Util.omit(res, ['show', 'dataKey']); 34 | chart.legend(res.dataKey, setEvent(options, chart)); 35 | } 36 | } else { 37 | chart.legend(setEvent(res, chart)); 38 | } 39 | } 40 | return chart; 41 | } 42 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setPieLabelConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | function setEvent (options: any, chart: any) { 4 | const newOptions = Util.omit(options, ['onClick']); 5 | if (options.onClick) { 6 | newOptions.onClick = (obj: any) => { 7 | options.onClick(obj, chart); 8 | } 9 | } 10 | return newOptions; 11 | } 12 | 13 | export const process = (chart: any, config: any) => { 14 | const cPieLabel = Util.deepClone(config.pieLabel); 15 | if (Util.isNil(cPieLabel)) { 16 | return; 17 | } 18 | return chart.pieLabel(setEvent(cPieLabel, chart)); 19 | } 20 | -------------------------------------------------------------------------------- /packages/goblin/src/components/setSeriesConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | import { ISeries } from '../typed/ISeries'; 3 | 4 | function setSeriesGeom (chart: any, currSeries: ISeries) { 5 | const geom = currSeries.geom; 6 | let geomObj; 7 | switch (geom) { 8 | case 'path': 9 | geomObj = chart.path(); 10 | break; 11 | case 'line': 12 | geomObj = chart.line(); 13 | break; 14 | case 'area': 15 | geomObj = chart.area(); 16 | break; 17 | case 'bar': 18 | case 'interval': 19 | geomObj = chart.interval(); 20 | break; 21 | case 'point': 22 | geomObj = chart.point(); 23 | break; 24 | case 'schema': 25 | geomObj = chart.schema(); 26 | break; 27 | case 'polygon': 28 | geomObj = chart.polygon(); 29 | break; 30 | default: 31 | geomObj = chart.line(); 32 | } 33 | return geomObj; 34 | } 35 | 36 | function setSeriesPosition (chart: any, currSeries: ISeries) { 37 | const position = currSeries.position; 38 | if (!Util.isNil(position)) { 39 | return chart.position(position); 40 | } 41 | 42 | return chart; 43 | } 44 | 45 | function setSeriesAdjust (chart: any, currSeries: ISeries) { 46 | const adjust = currSeries.adjust; 47 | if (!Util.isNil(adjust)) { 48 | return chart.adjust(adjust); 49 | } 50 | 51 | return chart; 52 | } 53 | 54 | function setSeriesShape (chart: any, currSeries: ISeries) { 55 | const shape = currSeries.shape; 56 | 57 | if (Util.isString(shape)) { 58 | return chart.shape(shape); 59 | } 60 | 61 | if (Util.isArray(shape) && shape.length >= 1) { 62 | if (shape[1]) { 63 | return chart.shape(shape[0], shape[1]); 64 | } 65 | 66 | return chart.shape(shape[0]); 67 | } 68 | 69 | return chart; 70 | } 71 | 72 | function setSeriesColor (chart: any, currSeries: ISeries) { 73 | const color = currSeries.color; 74 | 75 | if (Util.isString(color)) { 76 | return chart.color(color); 77 | } 78 | 79 | if (Util.isArray(color) && color.length >= 1) { 80 | if (color[1]) { 81 | return chart.color(color[0], color[1]); 82 | } 83 | return chart.color(color[0]); 84 | } 85 | 86 | return chart; 87 | } 88 | 89 | function setSeriesSize (chart: any, currSeries: ISeries) { 90 | const size = currSeries.size; 91 | 92 | if (Util.isNumber(size) || Util.isString(size)) { 93 | return chart.size(size); 94 | } 95 | 96 | if (Util.isArray(size) && size.length >= 1) { 97 | if (size[1]) { 98 | return chart.size(size[0], size[1]); 99 | } 100 | return chart.size(size[0]) 101 | } 102 | return chart; 103 | } 104 | 105 | function setSeriesStyle (chart: any, currSeries: ISeries) { 106 | const style = currSeries.style; 107 | 108 | if (Util.isArray(style) && style.length >= 1) { 109 | if (style[1]) { 110 | return chart.style(style[0], style[1]); 111 | } 112 | 113 | return chart.style(style[0]); 114 | } 115 | 116 | if (Util.isPlainObject(style)) { 117 | return chart.style(style); 118 | } 119 | 120 | return chart; 121 | } 122 | 123 | export const process = (chart: any, config: any) => { 124 | const cSeries = Util.deepClone(config.series); 125 | const isArr = Util.isArray(cSeries); 126 | 127 | if (Util.isNil(cSeries) || Util.isEmpty(cSeries)) { 128 | return chart; 129 | } 130 | 131 | let arrSeries = isArr ? cSeries : [cSeries]; 132 | // arrSeries = setQuickType.process(arrSeries, config.coord); 133 | 134 | // arrSeries = Util.sortBy(arrSeries); 135 | 136 | let chartInstance; 137 | arrSeries.forEach((currSeries: any) => { 138 | chartInstance = setSeriesGeom(chart, currSeries); 139 | chartInstance = setSeriesPosition(chartInstance, currSeries); 140 | chartInstance = setSeriesColor(chartInstance, currSeries); 141 | chartInstance = setSeriesSize(chartInstance, currSeries); 142 | chartInstance = setSeriesShape(chartInstance, currSeries); 143 | chartInstance = setSeriesAdjust(chartInstance, currSeries); 144 | chartInstance = setSeriesStyle(chartInstance, currSeries); 145 | }) 146 | 147 | return chartInstance; 148 | } -------------------------------------------------------------------------------- /packages/goblin/src/components/setTooltipConfig.ts: -------------------------------------------------------------------------------- 1 | import { Util } from '../utils/Commom'; 2 | 3 | function setEvent (options: any, chart: any) { 4 | const newOptions = Util.omit(options, ['onChange', 'onHide', 'onShow']); 5 | if (options.onChange) { 6 | newOptions.onChange = (obj: any) => { 7 | options.onChange(obj, chart); 8 | }; 9 | } 10 | if (options.onHide) { 11 | newOptions.onHide = (obj: any) => { 12 | options.onHide(obj, chart); 13 | }; 14 | } 15 | if (options.onShow) { 16 | newOptions.onShow = (obj: any) => { 17 | options.onShow(obj, chart); 18 | }; 19 | } 20 | return newOptions; 21 | } 22 | 23 | export const process = (chart: any, config: any) => { 24 | const cTooltip = Util.deepClone(config.tooltip); 25 | if (Util.isNil(cTooltip) || cTooltip === false || cTooltip.show === false) { 26 | return chart.tooltip(false); 27 | } 28 | 29 | const options = Util.omit(cTooltip, ['show']); 30 | return chart.tooltip(setEvent(options, chart)); 31 | }; 32 | -------------------------------------------------------------------------------- /packages/goblin/src/index.ts: -------------------------------------------------------------------------------- 1 | import CommonChart from './core/CommonChart'; 2 | import { Util } from './utils/Commom'; 3 | import IAxisConfig, { IAxis } from './typed/IAxis'; 4 | import IChart from './typed/IChart'; 5 | import IDefs from './typed/IDefs'; 6 | import IAnimate from './typed/IAnimate'; 7 | import ISeriesConfig, { ISeries } from './typed/ISeries'; 8 | import IGuideConfig, { IGuide, ILineGuide, IRectGuide, IHtmlGuide } from './typed/IGuide'; 9 | import ICoord, { IPolarCoord, IRectCoord } from './typed/ICoord'; 10 | import ILegendConfig, { ILegend } from './typed/ILegend'; 11 | import ITooltipConfig, { ITooltip } from './typed/ITooltip'; 12 | 13 | const F2 = require('@antv/f2'); 14 | 15 | export { 16 | IAxis, 17 | IAxisConfig, 18 | IChart, 19 | IDefs, 20 | ISeries, 21 | IAnimate, 22 | ISeriesConfig, 23 | IGuide, 24 | IGuideConfig, 25 | ILineGuide, 26 | IRectGuide, 27 | IHtmlGuide, 28 | ICoord, 29 | IPolarCoord, 30 | IRectCoord, 31 | ILegend, 32 | ILegendConfig, 33 | ITooltip, 34 | ITooltipConfig 35 | }; 36 | export const Global = F2.Global; 37 | export const Shape = F2.Shape; 38 | export const Chart = F2.Chart; 39 | 40 | export default function (config: any) { 41 | if (Util.isNil(config) || Util.isEmpty(config)) { 42 | return; 43 | } 44 | const commonChart = new CommonChart(config); 45 | commonChart.render(); 46 | 47 | return commonChart; 48 | } 49 | -------------------------------------------------------------------------------- /packages/goblin/src/plugin/pieLabel.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file PieLabel 3 | * @description register plugin for pieLabel 4 | */ 5 | import IPieLabel from '../typed/IPieLabel'; 6 | const PieLabel = require('@antv/f2/lib/plugin/pie-label'); 7 | 8 | export { IPieLabel }; 9 | 10 | export default function(Chart: any) { 11 | Chart.plugins.register(PieLabel); 12 | }; 13 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IAnimate.ts: -------------------------------------------------------------------------------- 1 | type func = () => void; 2 | 3 | interface IAnimateBase { 4 | type?: string; 5 | duration?: number; 6 | easing?: string | func; 7 | success?: func; 8 | } 9 | 10 | type IAnimate = boolean | IAnimateBase; 11 | 12 | export default IAnimate; 13 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IAxis.ts: -------------------------------------------------------------------------------- 1 | import * as ICommon from './ICommon'; 2 | 3 | interface IAxisTick { 4 | ticks?: number[]; 5 | tickCount?: number; 6 | tickInterval?: number; 7 | } 8 | 9 | export interface IAxis { 10 | dataKey?: string; 11 | show?: boolean; 12 | labelOffset?: number; 13 | tick?: IAxisTick; 14 | grid?: any; 15 | label?: any; 16 | line?: boolean | ICommon.ILineStyle; 17 | tickLine?: ICommon.ILineStyle; 18 | } 19 | 20 | type IAxisConfig = boolean | IAxis | IAxis[]; 21 | 22 | export default IAxisConfig; -------------------------------------------------------------------------------- /packages/goblin/src/typed/IChart.ts: -------------------------------------------------------------------------------- 1 | export interface IChart { 2 | id?: any; 3 | el?: any; 4 | height?: number | string; 5 | width?: number | string; 6 | padding?: number | number[]; 7 | pixelRatio?: number; 8 | } 9 | 10 | export default IChart; 11 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/ICommon.ts: -------------------------------------------------------------------------------- 1 | export interface ICommonDrawStyle { 2 | fill?: string; 3 | fillStyle?: string; 4 | fillOpacity?: number; 5 | stroke?: string; 6 | strokeStyle?: string; 7 | strokeOpacity?: number; 8 | shadowColor?: string; 9 | shadowBlur?: number; 10 | shadowOffsetX?: number; 11 | shadowOffsetY?: number; 12 | globalOpacity?: number; 13 | opacity?: number; 14 | globalCompositionOperation?: string; 15 | } 16 | 17 | export interface ITextStyle { 18 | fontSize?: number | string; 19 | fontFamily?: string; 20 | fontWeight?: string; 21 | textAlign?: string; 22 | textBaseline?: string; 23 | fill?: string; 24 | lineHeight?: number; 25 | shadowBlur?: number; 26 | shadowColor?: string; 27 | } 28 | 29 | export interface ILineStyle { 30 | stroke?: string; 31 | lineWidth?: number; 32 | lineHeight?: number; 33 | lineDash?: number[]; 34 | length?: number; 35 | } 36 | 37 | export interface ICircleStyle { 38 | x?: number; 39 | y?: number; 40 | r?: number; 41 | fill?: string; 42 | } 43 | 44 | export type formatterFunc = (val: number | string) => string | number; 45 | 46 | export type func = () => void; 47 | 48 | export type eventFunc = (ev: any, chart?: any) => void; 49 | 50 | export type shapeFunc = (x: number, y: number, r: number, ctx: any) => void; 51 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/ICoord.ts: -------------------------------------------------------------------------------- 1 | export interface IRectCoord { 2 | type?: 'rect'; 3 | transposed?: boolean; 4 | } 5 | 6 | export interface IPolarCoord { 7 | type?: 'polar'; 8 | transposed?: boolean; 9 | radius?: number; 10 | innerRadius?: number; 11 | startAngle?: number; 12 | endAngle?: number; 13 | } 14 | 15 | type ICoord = IRectCoord | IPolarCoord; 16 | 17 | export default ICoord; 18 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IDefs.ts: -------------------------------------------------------------------------------- 1 | type formatterFunc = (val: number) => string | number 2 | 3 | interface ICommonDefs { 4 | dataKey: string; 5 | type?: string; 6 | tickCount?: number; 7 | formatter?: string | formatterFunc; 8 | range?: number[]; 9 | } 10 | 11 | interface ILinearCommonDefs { 12 | nice?: boolean; 13 | min?: number; 14 | max?: number; 15 | tickInterval?: number; 16 | } 17 | 18 | export type ILinearDefs = ICommonDefs & ILinearCommonDefs; 19 | 20 | interface ISCatDefs { 21 | values?: string; 22 | } 23 | 24 | export type ICatDefs = ICommonDefs & ISCatDefs; 25 | 26 | interface ITimeCommonDefs { 27 | mask?: string; 28 | } 29 | 30 | export type ITimeDefs = ICommonDefs & ILinearCommonDefs & ITimeCommonDefs; 31 | 32 | interface ISTimeCatDefs { 33 | nice?: boolean; 34 | mask?: string; 35 | values?: string; 36 | } 37 | 38 | export type ITimeCatDefs = ILinearCommonDefs & ISTimeCatDefs; 39 | 40 | export type IDefs = ILinearDefs | ICatDefs | ITimeCatDefs; 41 | 42 | type IDefsConfig = IDefs | IDefs[]; 43 | 44 | export default IDefsConfig; 45 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IGuide.ts: -------------------------------------------------------------------------------- 1 | import * as ICommon from './ICommon'; 2 | 3 | type func = () => void; 4 | 5 | export interface ILineGuide { 6 | type?: 'line'; 7 | top?: boolean; 8 | start?: object | (number | string)[] | func; 9 | end?: object | (number | string)[] | func; 10 | lineStyle: ICommon.ILineStyle; 11 | } 12 | 13 | export interface IRectGuide { 14 | type?: 'rect', 15 | start?: (number | string)[]; 16 | end?: (number | string)[]; 17 | lineStyle: ICommon.ILineStyle; 18 | } 19 | 20 | export interface IHtmlGuide { 21 | type?: 'html'; 22 | position?: object | (number | string)[] | func; 23 | html?: string; 24 | point?: (number | string)[]; 25 | } 26 | 27 | export interface ITextGuide { 28 | type?: 'text'; 29 | top?: boolean, 30 | position?: object | (number | string)[] | func; 31 | content?: string; 32 | style?: ICommon.ITextStyle; 33 | offsetX?: number; 34 | offsetY?: number; 35 | } 36 | 37 | export interface ITagGuide { 38 | type?: 'tag' 39 | top?: boolean, 40 | position?: object | (number | string)[] | func; 41 | content?: string, 42 | direct?: string, 43 | side?: number, 44 | offsetX?: number, 45 | offsetY?: number, 46 | background?: object, 47 | textStyle?: object, 48 | withPoint?: boolean, 49 | pointStyle?: object 50 | } 51 | 52 | export interface IArcGuide { 53 | type?: 'arc' 54 | top?: boolean, 55 | start?: object | (number | string)[] | func; 56 | end?: object | (number | string)[] | func; 57 | style?: object 58 | } 59 | 60 | export type IGuide = ILineGuide | IRectGuide | IHtmlGuide | ITextGuide; 61 | 62 | type IGuideConfig = IGuide | IGuide[]; 63 | 64 | export default IGuideConfig; 65 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/ILegend.ts: -------------------------------------------------------------------------------- 1 | import * as ICommon from './ICommon'; 2 | 3 | interface Marker { 4 | symbol?: string, 5 | radius?: number 6 | } 7 | 8 | export interface ILegend { 9 | dataKey?: string; 10 | show?: boolean; 11 | position?: string; 12 | align?: string; 13 | verticalAlign?: string; 14 | itemWidth?: number; 15 | showTitle?: boolean; 16 | titleStyle?: ICommon.ITextStyle; 17 | offsetX?: number; 18 | offsetY?: number; 19 | titleGap?: number; 20 | itemGap?: number; 21 | itemMarginBottom?: number; 22 | wordSpace?: number; 23 | unCheckColor?: string; 24 | itemFormatter?: ICommon.formatterFunc; 25 | marker?: string | Marker | ICommon.shapeFunc; 26 | nameStyle?: ICommon.ITextStyle; 27 | valueStyle?: ICommon.ITextStyle; 28 | triggerOn?: string | ICommon.eventFunc; 29 | clickable?: boolean; 30 | onClick?: ICommon.eventFunc; 31 | custom?: boolean; 32 | items?: any; 33 | } 34 | 35 | type ILegendConfig = boolean | ILegend | ILegend[]; 36 | 37 | export default ILegendConfig; 38 | 39 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IMain.ts: -------------------------------------------------------------------------------- 1 | import IChart from './IChart'; 2 | import ISeries from './ISeries'; 3 | import ICoord from './ICoord'; 4 | import IGuide from './IGuide'; 5 | import IAxis from './IAxis'; 6 | import IDefs from './IDefs'; 7 | import IAnimate from './IAnimate'; 8 | import ILegend from './ILegend'; 9 | import ITooltip from './ITooltip'; 10 | import IPieLabel from './IPieLabel'; 11 | 12 | interface ISMain { 13 | data?: any; 14 | defs?: IDefs; 15 | chart?: IChart; 16 | series?: ISeries; 17 | coord?: ICoord; 18 | axis?: IAxis; 19 | guide: IGuide; 20 | animate?: IAnimate; 21 | legend?: ILegend; 22 | tooltip?: ITooltip; 23 | pieLabel?: IPieLabel; 24 | } 25 | 26 | type IMainConfig = ISMain; 27 | 28 | export default IMainConfig; 29 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/IPieLabel.ts: -------------------------------------------------------------------------------- 1 | import * as ICommon from './ICommon'; 2 | 3 | interface IActiveStyle extends ICommon.ICommonDrawStyle { 4 | offset?: number; 5 | appendRadius?: number; 6 | } 7 | 8 | type formatterFunc = (data: any, color: string) => any; 9 | 10 | interface IPieLabel { 11 | anchorOffset?: number; 12 | inflectionOffset?: number; 13 | sidePadding?: number; 14 | lineHeight?: number; 15 | adjustOffset?: number; 16 | skipOverlapLabels?: boolean; 17 | lineStyle?: ICommon.ILineStyle; 18 | anchorStyle?: ICommon.ICircleStyle; 19 | label1?: formatterFunc; 20 | label2?: formatterFunc; 21 | onClick?: ICommon.eventFunc; 22 | triggerOn?: string; 23 | activeShape?: boolean; 24 | activeStyle?: IActiveStyle; 25 | label1OffsetY?: number; 26 | label2OffsetY?: number; 27 | } 28 | 29 | export default IPieLabel; 30 | -------------------------------------------------------------------------------- /packages/goblin/src/typed/ISeries.ts: -------------------------------------------------------------------------------- 1 | export interface ISeries { 2 | position?: string | string[]; 3 | geom?: string; 4 | adjust?: string | object; 5 | color?: any; 6 | shape?: any; 7 | size?: any; 8 | opacity?: any; 9 | style?: any; 10 | } 11 | 12 | type ISeriesConfig = ISeries | ISeries[]; 13 | 14 | export default ISeriesConfig; -------------------------------------------------------------------------------- /packages/goblin/src/typed/ITooltip.ts: -------------------------------------------------------------------------------- 1 | import * as ICommon from './ICommon'; 2 | 3 | interface Background { 4 | radius?: number; 5 | fill?: string; 6 | padding: number | string | (number | string)[] 7 | } 8 | 9 | interface ItemMarkerStyle { 10 | radius?: number; 11 | symbol?: string; 12 | lineWidth?: number; 13 | stroke?: string; 14 | } 15 | 16 | export interface ITooltip { 17 | show?: boolean; 18 | triggerOn?: string; 19 | triggerOff?: string; 20 | showTitle?: boolean; 21 | showCrosshairs?: boolean; 22 | crosshairsStyle?: ICommon.ILineStyle; 23 | showTooltipMarker?: boolean; 24 | background?: Background; 25 | titleStyle?: ICommon.ITextStyle; 26 | nameStyle?: ICommon.ITextStyle; 27 | valueStyle?: ICommon.ITextStyle; 28 | showItemMarker?: boolean; 29 | itemMarkerStyle?: ItemMarkerStyle; 30 | defaultItem?: object; 31 | custom?: ICommon.eventFunc | boolean; 32 | onHide?: ICommon.eventFunc; 33 | onShow?: ICommon.eventFunc; 34 | onChange?: ICommon.eventFunc; 35 | }; 36 | 37 | type ITooltipConfig = boolean | ITooltip; 38 | 39 | export default ITooltipConfig; 40 | -------------------------------------------------------------------------------- /packages/goblin/src/utils/Commom.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 基础工具 3 | */ 4 | 5 | export const Util = { 6 | deepClone: function (obj: any) { 7 | if (!obj) { 8 | return obj; 9 | } 10 | let cloneObj: any; 11 | 12 | [Number, String, Boolean].forEach(type => { 13 | if (obj instanceof type) { 14 | cloneObj = type(obj); 15 | } 16 | }); 17 | 18 | if (typeof cloneObj === 'undefined') { 19 | if (Object.prototype.toString.call(obj) === '[object Array]') { 20 | cloneObj = []; 21 | obj.forEach((child: any, index: any) => { 22 | cloneObj[index] = Util.deepClone(child); 23 | }); 24 | } else if (typeof obj === 'object') { 25 | if (obj.nodeType && typeof obj.cloneNode === 'function') { 26 | // 不复制DOM结点 27 | // cloneObj = obj.cloneNode(true); 28 | cloneObj = obj; 29 | } else 30 | if (!obj.prototype) { 31 | if (obj instanceof Date) { 32 | cloneObj = new Date(String(obj)); 33 | } else { 34 | cloneObj = {}; 35 | for (let i in obj) { 36 | cloneObj[i] = Util.deepClone(obj[i]); 37 | } 38 | } 39 | } 40 | } else { 41 | // if (false && obj.constructor) { 42 | // cloneObj = new obj.constructor(); 43 | // } else { 44 | cloneObj = obj; 45 | // } 46 | } 47 | } else { 48 | cloneObj = obj; 49 | } 50 | return cloneObj; 51 | }, 52 | isArray: ('isArray' in Array) ? Array.isArray : function(obj: any) { 53 | return toString.call(obj) === '[object Array]'; 54 | }, 55 | isEmpty: function (obj: any) { 56 | if (obj == null) return true; 57 | if (obj.length > 0) return false; 58 | if (obj.length === 0) return true; 59 | if (typeof obj !== 'object') return true; 60 | for (let key in obj) { 61 | if (Object.prototype.hasOwnProperty.call(obj, key)) return false; 62 | } 63 | return true; 64 | }, 65 | isNil: function (obj: any) { 66 | return obj === undefined || obj === null; 67 | }, 68 | isEqual: function (obj:any, newObj: any) { 69 | return eq(obj, newObj, []); 70 | }, 71 | isString: function (obj: any) { 72 | return typeof obj === 'string'; 73 | }, 74 | isBoolean: function (obj: any) { 75 | return typeof obj === 'boolean'; 76 | }, 77 | isNumber: function (obj: any) { 78 | return typeof obj === 'number'; 79 | }, 80 | isObject: (toString.call(null) === '[object Object]') ? 81 | function(obj: any) { 82 | // check ownerDocument here as well to exclude DOM nodes 83 | return obj !== null && obj !== undefined && toString.call(obj) === '[object Object]' && obj.ownerDocument === undefined; 84 | } : function(obj: any) { 85 | return toString.call(obj) === '[object Object]'; 86 | }, 87 | isPlainObject: function (obj: any) { 88 | if (!Util.isObject(obj)) return false; 89 | if (Object.getPrototypeOf(obj) === null) { 90 | return true; 91 | } 92 | let proto: any = obj; 93 | while (Object.getPrototypeOf(proto) !== null) { 94 | proto = Object.getPrototypeOf(proto); 95 | } 96 | return Object.getPrototypeOf(obj) === proto; 97 | }, 98 | /** 99 | * Checks if `value` is object-like. A value is object-like if it's not `null` 100 | * and has a `typeof` result of "object". 101 | */ 102 | isObjectLike: function (obj: any) { 103 | return typeof obj === 'object' && obj !== null 104 | }, 105 | isFunction(obj: any) { 106 | return typeof obj === 'function'; 107 | }, 108 | omit: function (obj: any, keys: string | Array) { 109 | const newObject: any = {}; 110 | const objectKeys = Object.keys(obj); 111 | const omitKeys = Array.isArray(keys) ? keys : [keys]; 112 | objectKeys.forEach(key => { 113 | if (omitKeys.indexOf(key) === -1) { 114 | newObject[key] = Util.deepClone(obj[key]); 115 | } 116 | }); 117 | return newObject; 118 | } 119 | } 120 | 121 | function eq(a: any, b: any, stack: any): boolean { 122 | if(a === b) { 123 | return a !== 0 || 1 / a == 1 / b; 124 | } 125 | if(a == null || b == null) { 126 | return a === b; 127 | } 128 | if(a._chain) { 129 | a = a._wrapped; 130 | } 131 | if(b._chain) { 132 | b = b._wrapped; 133 | } 134 | if(a.isEqual && Util.isFunction(a.isEqual)) { 135 | return a.isEqual(b); 136 | } 137 | if(b.isEqual && Util.isFunction(b.isEqual)) { 138 | return b.isEqual(a); 139 | } 140 | var className = toString.call(a); 141 | if(className != toString.call(b)) { 142 | return false; 143 | } 144 | switch (className) { 145 | case '[object String]': 146 | return a == String(b); 147 | case '[object Number]': 148 | return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b); 149 | case '[object Date]': 150 | case '[object Boolean]': 151 | return +a == +b; 152 | case '[object RegExp]': 153 | return a.source == b.source && a.global == b.global && a.multiline == b.multiline && a.ignoreCase == b.ignoreCase; 154 | } 155 | if( typeof a != 'object' || typeof b != 'object') { 156 | return false; 157 | } 158 | var length = stack.length; 159 | while(length--) { 160 | if(stack[length] == a) { 161 | return true; 162 | } 163 | } 164 | stack.push(a); 165 | var size = 0, result = true; 166 | if(className == '[object Array]') { 167 | size = a.length; 168 | result = size == b.length; 169 | if(result) { 170 | while(size--) { 171 | if(!( result = size in a == size in b && eq(a[size], b[size], stack))) 172 | break; 173 | } 174 | } 175 | } else { 176 | if('constructor' in a != 'constructor' in b || a.constructor != b.constructor) 177 | return false; 178 | for(var key in a) { 179 | if(Object.hasOwnProperty.call(a, key)) { 180 | size++; 181 | if(!( result = Object.hasOwnProperty.call(b, key) && eq(a[key], b[key], stack))) 182 | break; 183 | } 184 | } 185 | if(result) { 186 | for(key in b) { 187 | if(Object.hasOwnProperty.call(b, key) && !(size--)) 188 | break; 189 | } 190 | result = !size; 191 | } 192 | } 193 | stack.pop(); 194 | return result; 195 | } 196 | 197 | export const transform2px = function ( 198 | value: any, 199 | relativeValue: number = 0, 200 | rootFontSize: number = 0): string | number | (string | number)[] { 201 | if (Util.isString(value)) { 202 | if (/^(\d*.?\d*)%$/.test(value)) { 203 | return Math.floor(Number(value.match(/^(\d*.?\d*)%$/)[1]) / 100 * relativeValue) || 0; 204 | } 205 | if (/^(\d*.?\d*)rem$/.test(value)) { 206 | return rootFontSize * Number(value.match(/^(\d*.?\d*)rem$/)[1]); 207 | } 208 | if (/^(\d*.?\d*)px$/.test(value)) { 209 | return Number(value.match(/^(\d*.?\d*)px$/)[1]); 210 | } 211 | } 212 | if (Util.isArray(value)) { 213 | const cValue: any = value; 214 | if (cValue.length && toString.call(cValue[0]) === '[objcet Object]') { 215 | cValue.foreach(function (v: any) { 216 | v = transform2px(v, relativeValue, rootFontSize); 217 | }); 218 | return cValue; 219 | } else { 220 | return cValue.map(function(v:number | string) { 221 | if (v === 'auto') { 222 | return v; 223 | } else { 224 | return transform2px(v, relativeValue, rootFontSize); 225 | } 226 | }); 227 | } 228 | } 229 | return value 230 | } 231 | -------------------------------------------------------------------------------- /packages/goblin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es2015", 4 | "outDir": "es", 5 | "noUnusedLocals": true, 6 | "strict": true, 7 | "removeComments": true, 8 | "preserveConstEnums": true, 9 | "sourceMap": true, 10 | "moduleResolution": "node", 11 | "declaration": true, 12 | "lib": [ 13 | "dom", 14 | "es2015" 15 | ] 16 | }, 17 | "include": [ 18 | "src/**/*" 19 | ], 20 | "exclude": [ 21 | "node_modules" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /packages/goblin/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:latest" 5 | ], 6 | "jsRules": {}, 7 | "rules": { 8 | "quotemark": [true, "single"], 9 | "no-console": [true, "log", "warn"], 10 | "object-literal-sort-keys": false 11 | }, 12 | "rulesDirectory": [] 13 | } 14 | -------------------------------------------------------------------------------- /packages/goblin/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const env = process.env.NODE_ENV; 3 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 4 | 5 | let config = { 6 | mode: 'production', 7 | entry: './lib/index.js', 8 | output: { 9 | path: path.resolve(__dirname, 'umd'), 10 | filename: 'goblin.min.js', 11 | library: 'goblin', 12 | libraryTarget: 'umd', 13 | }, 14 | resolve: { 15 | extensions: ['.js', '.json'], 16 | }, 17 | module: { 18 | rules: [{ 19 | test: /\.js?$/, 20 | exclude: /node_modules/, 21 | use: { 22 | loader: 'babel-loader', 23 | }, 24 | }] 25 | }, 26 | plugins: [], 27 | }; 28 | 29 | if (env === 'analyse') { 30 | config.plugins.push( 31 | new BundleAnalyzerPlugin() 32 | ); 33 | } 34 | 35 | module.exports = config; 36 | --------------------------------------------------------------------------------