├── .browserslistrc ├── docsrc ├── src │ ├── assets │ │ └── styles │ │ │ ├── _index.scss │ │ │ ├── main.scss │ │ │ └── reset.scss │ ├── App.vue │ ├── components │ │ ├── examples │ │ │ ├── PieChartExamples.vue │ │ │ ├── LineChartExamples.vue │ │ │ ├── SlopeChartExamples.vue │ │ │ ├── BarChartExamples.vue │ │ │ ├── SlopeChartExampleBasic.vue │ │ │ ├── SlopeChartExampleHighlight.vue │ │ │ ├── SlopeChartExampleColors.vue │ │ │ ├── BarChartExampleHorizontal.vue │ │ │ ├── LineChartExampleBasic.vue │ │ │ ├── BarChartExampleGroup.vue │ │ │ ├── LineChartExampleCustomization.vue │ │ │ ├── PieChartExampleDataUpdate.vue │ │ │ ├── SlopeChartExampleDataUpdate.vue │ │ │ ├── BarChartExampleDataUpdate.vue │ │ │ ├── LineChartExampleUpdate.vue │ │ │ ├── BarChartExampleTooltipOverride.vue │ │ │ └── BarChartExampleBasic.vue │ │ ├── HeaderComponent.vue │ │ ├── ChartTitleComponent.vue │ │ ├── ChartTemplateComponent.vue │ │ ├── ChartImportComponent.vue │ │ ├── ChartDataComponent.vue │ │ ├── ChartStylesComponent.vue │ │ ├── FooterComponent.vue │ │ ├── ChartIndexComponent.vue │ │ ├── index.js │ │ └── ChartColorComponent.vue │ ├── main.js │ ├── views │ │ ├── Examples.vue │ │ ├── SlicesChart.vue │ │ ├── BarChart.vue │ │ ├── PieChart.vue │ │ ├── SlopeChart.vue │ │ ├── Home.vue │ │ ├── WordsCloud.vue │ │ ├── Sunburst.vue │ │ └── LineChart.vue │ └── router │ │ └── index.js ├── public │ ├── favicon.ico │ ├── index.html │ └── img │ │ └── icons │ │ ├── D3BarChart.svg │ │ ├── D3PieChart.svg │ │ ├── D3SlopeChart.svg │ │ ├── D3LineChart.svg │ │ ├── D3Sunburst.svg │ │ └── D3SlicesChart.svg ├── babel.config.js ├── vue.config.js └── package.json ├── docs ├── favicon.ico ├── public │ ├── css │ │ ├── chunk-44b11179.71b8c2da.css │ │ └── chunk-vendors.a4338027.css │ └── js │ │ ├── chunk-2d2082c5.86c27c45.js │ │ ├── chunk-2d0df447.c5f955b4.js │ │ ├── chunk-44b11179.1a9686cd.js │ │ ├── chunk-2d0be166.0e330607.js │ │ ├── chunk-74b0551a.a3d50613.js │ │ ├── chunk-2d0e62b7.4876b9fb.js │ │ ├── chunk-2d0a387d.1561b119.js │ │ ├── chunk-b7d79802.be2d9b19.js │ │ ├── chunk-2d2082c5.86c27c45.js.map │ │ ├── chunk-2d0df447.c5f955b4.js.map │ │ ├── chunk-74b0551a.a3d50613.js.map │ │ └── chunk-2d0be166.0e330607.js.map ├── index.html └── img │ └── icons │ ├── D3BarChart.svg │ ├── D3PieChart.svg │ ├── D3SlopeChart.svg │ ├── D3LineChart.svg │ ├── D3Sunburst.svg │ └── D3SlicesChart.svg ├── babel.config.js ├── .gitignore ├── src ├── barchart │ └── d3.barchart.vue ├── sunburst │ └── d3.sunburst.vue ├── linechart │ └── d3.linechart.vue ├── wordscloud │ ├── d3.wordscloud.vue │ └── d3.wordscloud.js ├── sliceschart │ └── d3.sliceschart.vue ├── index.js ├── piechart │ └── d3.piechart.vue ├── slopechart │ └── d3.slopechart.vue ├── entry.js ├── styles.scss ├── d3.chart.vue └── d3.chart.js ├── README.md ├── package.json └── CONTRIB.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | current node 2 | last 2 versions and > 2% 3 | ie > 10 4 | -------------------------------------------------------------------------------- /docsrc/src/assets/styles/_index.scss: -------------------------------------------------------------------------------- 1 | @import './reset'; 2 | @import './main'; -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saigesp/vue-d3-charts/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /docsrc/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saigesp/vue-d3-charts/HEAD/docsrc/public/favicon.ico -------------------------------------------------------------------------------- /docsrc/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docsrc/src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docsrc/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | outputDir: path.resolve(__dirname, "../docs"), 5 | assetsDir: "./public", 6 | publicPath: "./" 7 | //publicPath: "./vue-d3-charts/" 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw? 21 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/PieChartExamples.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/public/css/chunk-44b11179.71b8c2da.css: -------------------------------------------------------------------------------- 1 | .flex{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex__middle{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.flex__middle svg{max-width:100%}@media screen and (min-width:768px){.flex__middle{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%}} -------------------------------------------------------------------------------- /docsrc/src/components/examples/LineChartExamples.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/barchart/d3.barchart.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/sunburst/d3.sunburst.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/linechart/d3.linechart.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/wordscloud/d3.wordscloud.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /docsrc/src/components/HeaderComponent.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/SlopeChartExamples.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docsrc/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import VueCodeHighlight from 'vue-code-highlight'; 5 | import './assets/styles/_index.scss' 6 | import '../node_modules/vue-code-highlight/themes/prism.css' 7 | import './components/index' 8 | 9 | Vue.use(VueCodeHighlight) 10 | Vue.config.productionTip = false 11 | 12 | new Vue({ 13 | router, 14 | render: h => h(App) 15 | }).$mount('#app') 16 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExamples.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/sliceschart/d3.sliceschart.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartTitleComponent.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | export { default as D3BarChart } from './barchart/d3.barchart.vue'; 3 | export { default as D3LineChart } from './linechart/d3.linechart.vue'; 4 | export { default as D3PieChart } from './piechart/d3.piechart.vue'; 5 | export { default as D3SlopeChart } from './slopechart/d3.slopechart.vue'; 6 | export { default as D3Sunburst } from './sunburst/d3.sunburst.vue'; 7 | export { default as D3WordsCloud } from './wordscloud/d3.wordscloud.vue'; 8 | export { default as D3SlicesChart } from './sliceschart/d3.sliceschart.vue'; 9 | -------------------------------------------------------------------------------- /src/piechart/d3.piechart.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /src/slopechart/d3.slopechart.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /docsrc/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-d3-charts 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartTemplateComponent.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 24 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartImportComponent.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 36 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartDataComponent.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /docsrc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vue-cli-service serve", 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.3.2", 12 | "vue": "^2.6.10", 13 | "vue-code-highlight": "^0.7.4", 14 | "vue-d3-charts": "../", 15 | "vue-router": "^3.1.3" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^4.0.0", 19 | "@vue/cli-plugin-router": "^4.0.0", 20 | "@vue/cli-service": "^4.0.0", 21 | "node-sass": "^4.12.0", 22 | "sass-loader": "^8.0.0", 23 | "vue-template-compiler": "^2.6.10" 24 | }, 25 | "postcss": { 26 | "plugins": { 27 | "autoprefixer": {} 28 | } 29 | }, 30 | "browserslist": [ 31 | "> 1%", 32 | "last 2 versions" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartStylesComponent.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 36 | -------------------------------------------------------------------------------- /docsrc/src/views/Examples.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/entry.js: -------------------------------------------------------------------------------- 1 | // Import vue components 2 | import * as components from '@/index'; 3 | 4 | // install function executed by Vue.use() 5 | const install = function installVueD3Charts(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Object.entries(components).forEach(([componentName, component]) => { 9 | Vue.component(componentName, component); 10 | }); 11 | }; 12 | 13 | // Create module definition for Vue.use() 14 | const plugin = { 15 | install, 16 | }; 17 | 18 | // To auto-install when vue is found 19 | // eslint-disable-next-line no-redeclare 20 | /* global window, global */ 21 | let GlobalVue = null; 22 | if (typeof window !== 'undefined') { 23 | GlobalVue = window.Vue; 24 | } else if (typeof global !== 'undefined') { 25 | GlobalVue = global.Vue; 26 | } 27 | if (GlobalVue) { 28 | GlobalVue.use(plugin); 29 | } 30 | 31 | // Default export is library as a whole, registered via Vue.use() 32 | export default plugin; 33 | 34 | // To allow individual component use, export components 35 | // each can be registered via Vue.component() 36 | export * from '@/index'; 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-d3-charts 2 | 3 | **The development of this library is frozen for now. When I have more time I will continue its development. Any contribution is welcome** 4 | 5 | Simply yet configurable charts build with D3. 6 | 7 | See [documentation and demo](https://saigesp.github.io/vue-d3-charts/) page. 8 | 9 | ### Install 10 | 11 | ```bash 12 | npm i vue-d3-charts --save 13 | ``` 14 | 15 | ### Usage 16 | 17 | Import: 18 | 19 | ```javascript 20 | import { D3BarChart } from 'vue-d3-charts'; 21 | ``` 22 | 23 | Template: 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | Configuration and data: 30 | 31 | ```javascript 32 | // data 33 | data = [{ 34 | name: "Lorem", 35 | total: 30 36 | },{ 37 | name: "Ipsum", 38 | total: 21 39 | },{ 40 | name: "Dolor", 41 | total: 20 42 | }] 43 | 44 | // Configuration 45 | config = { 46 | key: "name", 47 | value: "total", 48 | color: "steelblue", 49 | } 50 | ``` 51 | 52 | ### Contributing 53 | 54 | See [contribution guide](CONTRIB.md). 55 | 56 | ### License 57 | 58 | This repository is available under **GNU LESSER GENERAL PUBLIC LICENSE v2.1** (LGPL). See [details](LICENSE.md). 59 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | .chart { 2 | 3 | /* Wrapper div (chart, title and source) */ 4 | &__wrapper { 5 | margin: 20px 0; 6 | } 7 | 8 | /* Wrap div (chart only) */ 9 | &__wrap { 10 | margin: 0; 11 | } 12 | 13 | /* Title */ 14 | &__title { 15 | text-align: center; 16 | font-weight: 700; 17 | } 18 | 19 | /* Source */ 20 | &__source { 21 | font-size: 12px; 22 | } 23 | 24 | /* Tooltip */ 25 | &__tooltip { 26 | position: absolute; 27 | pointer-events: none; 28 | display: none; 29 | 30 | &.active { 31 | display: block; 32 | } 33 | 34 | > div { 35 | background: #2b2b2b; 36 | color: white; 37 | padding: 6px 10px; 38 | border-radius: 3px; 39 | } 40 | } 41 | 42 | /* Axis */ 43 | &__axis { 44 | font-size: 12px; 45 | shape-rendering: crispEdges; 46 | 47 | /* Axis title */ 48 | &-title {} 49 | } 50 | 51 | /* Grid */ 52 | &__grid { 53 | .domain { 54 | stroke: none; 55 | fill: none; 56 | } 57 | 58 | .tick line { 59 | opacity: 0.2; 60 | } 61 | } 62 | 63 | /* Elements labels */ 64 | &__label { 65 | font-size: 12px; 66 | } 67 | 68 | /* Clickable element */ 69 | .clickable { 70 | cursor: pointer; 71 | } 72 | } -------------------------------------------------------------------------------- /src/d3.chart.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 57 | 58 | 61 | -------------------------------------------------------------------------------- /docsrc/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import HomeView from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'home', 11 | component: HomeView 12 | }, 13 | {path: '/examples', name: 'examples', component: () => import('../views/Examples.vue')}, 14 | {path: '/barchart', name: 'barchart', component: () => import('../views/BarChart.vue')}, 15 | {path: '/linechart', name: 'linechart', component: () => import('../views/LineChart.vue')}, 16 | {path: '/slopechart', name: 'slopechart', component: () => import('../views/SlopeChart.vue')}, 17 | {path: '/piechart', name: 'piechart', component: () => import('../views/PieChart.vue')}, 18 | {path: '/sunburst', name: 'sunburst', component: () => import('../views/Sunburst.vue')}, 19 | {path: '/wordscloud', name: 'wordscloud', component: () => import('../views/WordsCloud.vue')}, 20 | {path: '/sliceschart', name: 'sliceschart', component: () => import('../views/SlicesChart.vue')}, 21 | ] 22 | 23 | const router = new VueRouter({ 24 | routes, 25 | scrollBehavior (to, from, savedPosition) { 26 | return { x: 0, y: 0 } 27 | } 28 | }) 29 | 30 | export default router 31 | -------------------------------------------------------------------------------- /docs/public/js/chunk-2d2082c5.86c27c45.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d2082c5"],{a451:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page"},[n("section",{staticClass:"example"},[n("h2",{staticClass:"page__title"},[e._v("Examples")]),n("p",{staticClass:"page__claim"},[e._v("Select chart to see code examples")]),n("div",{staticClass:"example__controls"},[n("select",{directives:[{name:"model",rawName:"v-model",value:e.currentComponent,expression:"currentComponent"}],on:{change:function(t){var n=Array.prototype.filter.call(t.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.currentComponent=t.target.multiple?n:n[0]}}},e._l(e.charts,(function(t){return n("option",{domProps:{value:t.component}},[e._v(e._s(t.name))])})),0)])]),e.currentComponent?n("div",[n(e.currentComponent,{tag:"component"})],1):e._e()])},o=[],r={name:"Examples",data:function(){return{currentComponent:!1,charts:[{name:"Bar chart",component:"BarChartExamples"},{name:"Pie chart",component:"PieChartExamples"},{name:"Line chart",component:"LineChartExamples"},{name:"Slope chart",component:"SlopeChartExamples"}]}}},c=r,l=n("2877"),s=Object(l["a"])(c,a,o,!1,null,null,null);t["default"]=s.exports}}]); 2 | //# sourceMappingURL=chunk-2d2082c5.86c27c45.js.map -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-d3-charts
-------------------------------------------------------------------------------- /docsrc/src/components/FooterComponent.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 36 | 37 | 58 | -------------------------------------------------------------------------------- /docs/public/css/chunk-vendors.a4338027.css: -------------------------------------------------------------------------------- 1 | code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} -------------------------------------------------------------------------------- /docs/img/icons/D3BarChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 17 | 18 | 20 | image/svg+xml 21 | 23 | 24 | 25 | 26 | 27 | 30 | 34 | 38 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3BarChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 17 | 18 | 20 | image/svg+xml 21 | 23 | 24 | 25 | 26 | 27 | 30 | 34 | 38 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/SlopeChartExampleBasic.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartIndexComponent.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | 34 | 72 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/SlopeChartExampleHighlight.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-d3-charts", 3 | "version": "0.2.8", 4 | "description": "", 5 | "main": "dist/vue-d3-charts.ssr.js", 6 | "browser": "dist/vue-d3-charts.esm.js", 7 | "module": "dist/vue-d3-charts.esm.js", 8 | "unpkg": "dist/vue-d3-charts.min.js", 9 | "files": [ 10 | "dist/*", 11 | "src/**/*.vue" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/Saigesp/vue-d3-charts.git" 16 | }, 17 | "scripts": { 18 | "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js", 19 | "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs", 20 | "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", 21 | "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife" 22 | }, 23 | "dependencies": { 24 | "d3-axis": "^1.0.12", 25 | "d3-cloud": "^1.2.5", 26 | "d3-ease": "^1.0.6", 27 | "d3-hierarchy": "^1.1.9", 28 | "d3-interpolate": "^1.4.0", 29 | "d3-scale": "^3.2.1", 30 | "d3-scale-chromatic": "^1.5.0", 31 | "d3-selection": "^1.4.1", 32 | "d3-shape": "^1.3.7", 33 | "d3-time-format": "^2.2.3", 34 | "d3-transition": "^1.3.2" 35 | }, 36 | "devDependencies": { 37 | "@babel/core": "^7.7.7", 38 | "@babel/preset-env": "^7.7.7", 39 | "@rollup/plugin-alias": "^2.2.0", 40 | "@rollup/plugin-commonjs": "^11.0.1", 41 | "@rollup/plugin-replace": "^2.2.1", 42 | "@vue/cli-plugin-babel": "^4.1.0", 43 | "@vue/cli-service": "^4.1.0", 44 | "cross-env": "^6.0.3", 45 | "minimist": "^1.2.0", 46 | "rollup": "^1.27.13", 47 | "rollup-plugin-babel": "^4.3.3", 48 | "rollup-plugin-terser": "^5.1.3", 49 | "rollup-plugin-vue": "^5.1.5", 50 | "vue": "^2.6.10", 51 | "vue-template-compiler": "^2.6.10" 52 | }, 53 | "peerDependencies": { 54 | "vue": "^2.6.10" 55 | }, 56 | "engines": { 57 | "node": ">=8" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0df447.c5f955b4.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0df447"],{"88d5":function(t,a,o){"use strict";o.r(a);var e=function(){var t=this,a=t.$createElement,o=t._self._c||a;return o("div",{staticClass:"page"},[o("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),o("section",{staticClass:"chart"},[o("D3SlicesChart",{attrs:{config:t.chartconfig,datum:t.chartdata}})],1),o("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/sliceschart/d3.sliceschart.js"}}),o("ChartTemplateComponent",{attrs:{template:t.chartcode}}),o("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),o("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),o("ChartColorComponent"),o("ChartStylesComponent",{attrs:{classname:"sliceschart",elements:["slice","label"]}})],1)},c=[],r=o("2dd5"),n={name:"SlicesChart",components:{D3SlicesChart:r["d"]},data:function(){return{chartname:"D3SlicesChart",chartdesc:"A slices chart fill the circle slices to illustrate numerical proportions.",chartcode:'',chartoptions:["margin","key","value","color","transition","radius"],chartcustomoptions:{radius:{required:!0}},chartconfig:{key:"name",value:"total",color:{key:"color",default:"#CCC"},radius:{inner:60,padding:.05,round:5},transition:{duration:200}},chartdata:[{name:"Lorem",total:50,color:"#DD1267"},{name:"Ipsum",total:180,color:"#E5243C"},{name:"Dolor",total:100,color:"#10699D"},{name:"Sit",total:160,color:"#2CBDE2"},{name:"Amet",total:112,color:"#3F7D44"},{name:"Conse",total:130,color:"#4C9F38"}],chartdatadesc:"An objects array is expected, with each object as a slice",chartdatacode:'chart_data = [{\n name: "Lorem",\n total: 30\n},{\n name: "Ipsum",\n total: 21\n},{\n name: "Dolor",\n total: 20\n}]',chartdataconfig:'key: "name", value: "total"'}}},s=n,l=o("2877"),i=Object(l["a"])(s,e,c,!1,null,null,null);a["default"]=i.exports}}]); 2 | //# sourceMappingURL=chunk-2d0df447.c5f955b4.js.map -------------------------------------------------------------------------------- /docsrc/src/components/examples/SlopeChartExampleColors.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExampleHorizontal.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/public/js/chunk-44b11179.1a9686cd.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-44b11179"],{5033:function(t,a,e){"use strict";var o=e("b4c9"),r=e.n(o);r.a},"76db":function(t,a,e){"use strict";e.r(a);var o=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"page"},[e("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),e("section",{staticClass:"chart"},[e("div",{staticClass:"flex"},[e("div",{staticClass:"flex__middle"},[e("D3PieChart",{attrs:{config:t.chartconfig,datum:t.chartdata,title:"Lorem ipsum",source:"Dolor sit amet"}})],1),e("div",{staticClass:"flex__middle"},[e("D3PieChart",{attrs:{config:t.chartconfig2,datum:t.chartdata,title:"Lorem ipsum",source:"Dolor sit amet"}})],1)])]),e("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/piechart/d3.piechart.js"}}),e("ChartTemplateComponent",{attrs:{template:t.chartcode}}),e("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),e("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),e("ChartColorComponent"),e("ChartStylesComponent",{attrs:{classname:"piechart",elements:["slice","label"]}}),e("PieChartExamples")],1)},r=[],c=e("2dd5"),n={name:"PieChart",components:{D3PieChart:c["c"]},data:function(){return{chartname:"D3PieChart",chartdesc:"A pie chart divides a circle into slices to illustrate numerical proportions.",chartcode:'',chartoptions:["margin","key","value","currentKey","color","transition","radius"],chartcustomoptions:{radius:{required:!0}},chartconfig:{key:"name",value:"total",color:{key:"color"},transition:{duration:200}},chartconfig2:{key:"name",value:"total",radius:{inner:80},color:{key:"color"},transition:{duration:200}},chartdata:[{name:"Lorem",total:30,color:"#425265"},{name:"Ipsum",total:21,color:"#3e9a70"},{name:"Dolor",total:20,color:"#41ab7b"},{name:"Sit",total:112,color:"#222f3e"}],chartdatadesc:"An objects array is expected, with each object as a pie slice",chartdatacode:'chart_data = [{\n name: "Lorem",\n total: 30\n},{\n name: "Ipsum",\n total: 21\n},{\n name: "Dolor",\n total: 20\n}]',chartdataconfig:'key: "name", value: "total"'}}},i=n,s=(e("5033"),e("2877")),l=Object(s["a"])(i,o,r,!1,null,null,null);a["default"]=l.exports},b4c9:function(t,a,e){}}]); 2 | //# sourceMappingURL=chunk-44b11179.1a9686cd.js.map -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0be166.0e330607.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0be166"],{"2f84":function(a,t,e){"use strict";e.r(t);var n=function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("div",{staticClass:"page"},[e("ChartTitleComponent",{attrs:{name:a.chartname,desc:a.chartdesc}}),e("section",{staticClass:"chart"},[e("D3Sunburst",{attrs:{config:a.chartconfig,datum:a.chartdata,title:"Lorem ipsum dolor sit amet"}})],1),e("ChartImportComponent",{attrs:{code:a.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/sunburst/d3.sunburst.js"}}),e("ChartTemplateComponent",{attrs:{template:a.chartcode}}),e("ChartDataComponent",{attrs:{desc:a.chartdatadesc,code:a.chartdatacode,config:a.chartdataconfig}}),e("ChartConfigComponent",{attrs:{options:a.chartoptions}}),e("ChartColorComponent"),e("ChartStylesComponent",{attrs:{classname:"sunburst"}})],1)},r=[],o=e("2dd5"),c={name:"Sunburst",components:{D3Sunburst:o["f"]},data:function(){return{chartname:"D3Sunburst",chartdesc:"A sunburst is used to visualize hierarchical data, depicted by concentric circles.",chartcode:'',chartoptions:["margin","key","value","color","transition"],chartconfig:{key:"name",value:"value",color:{keys:{one:"#C1E4D5",two:"#41B882",four:"#80CCAA",lorem:"#FC6471",ipsum:"#384A5F"}},transition:{duration:500}},chartdata:[{name:"one",children:[{name:"two",value:9038},{name:"four",value:554}]}],chartdatadesc:"An array with a single hierachycal object is expected",chartdatacode:'chart_data = [{\n "name": "one",\n "children": [{\n "name": "two",\n "children": [{\n "name": "three",\n "value": 2354\n },{\n "name": "four",\n "value": 1384\n }]\n }]\n}]',chartdataconfig:'key: "name", value: "value"'}},mounted:function(){var a=this;setTimeout((function(){a.chartdata=[{name:"one",children:[{name:"two",children:[{name:"lorem",value:938},{name:"ipsum",value:3812}]},{name:"four",value:2354}]}]}),2e3),setTimeout((function(){a.chartdata=[{name:"one",children:[{name:"two",children:[{name:"dolor",value:1500},{name:"lorem",value:938},{name:"ipsum",value:3812}]},{name:"four",value:2354}]}]}),4e3),setTimeout((function(){a.chartdata=[{name:"one",children:[{name:"two",children:[{name:"dolor",value:1500},{name:"lorem",value:938}]},{name:"four",value:2354}]}]}),6e3)}},u=c,s=e("2877"),i=Object(s["a"])(u,n,r,!1,null,null,null);t["default"]=i.exports}}]); 2 | //# sourceMappingURL=chunk-2d0be166.0e330607.js.map -------------------------------------------------------------------------------- /docs/img/icons/D3PieChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3PieChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /docs/public/js/chunk-74b0551a.a3d50613.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-74b0551a"],{89463:function(t,a,e){"use strict";e.r(a);var o=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"page"},[e("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),e("section",{staticClass:"chart"},[e("D3BarChart",{attrs:{config:t.chartconfig,datum:t.chartdata,title:"Lorem ipsum",source:"Dolor sit amet"}})],1),e("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/barchart/d3.barchart.js"}}),e("ChartTemplateComponent",{attrs:{template:t.chartcode}}),e("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),e("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),e("ChartColorComponent"),e("ChartStylesComponent",{attrs:{classname:"barchart",elements:["bar","label"]}}),e("BarChartExamples")],1)},r=[],n=e("2dd5"),c={name:"BarChart",components:{D3BarChart:n["a"]},data:function(){return{chartname:"D3BarChart",chartdesc:"A bar chart presents categorical data with rectangular bars with heights proportional to the values that they represent.",chartcode:'',chartoptions:["margin","key","values","color","transition","axis","labelRotation","tooltip","currentKey","orientation"],chartcustomoptions:{tooltip:{required:!1,default:"tooltip: { label: false }",type:"Object",desc:"Tooltip options convention.
label: object field to override the label in the tooltip. If set to false, label will be the key field.",example:'tooltip: { label: "displayName" }'}},chartconfig:{key:"name",values:["total"],color:{current:"#41B882"},axis:{yTitle:"Lorem ipsum dolor sit amet",yTicks:10,yFormat:".0s"},transition:{ease:"easeBounceOut",duration:1e3}},chartdata:[{name:"1992",total:4748},{name:"1993",total:5526},{name:"1994",total:8574},{name:"1995",total:15805},{name:"1996",total:14582},{name:"1997",total:26694},{name:"1998",total:35205},{name:"1999",total:45944},{name:"2000",total:78595},{name:"2001",total:78530},{name:"2002",total:45407},{name:"2003",total:54044},{name:"2004",total:69165},{name:"2005",total:61798},{name:"2006",total:63686}],chartdatadesc:"An objects array is expected, with each object as a bar",chartdatacode:'chart_data = [{\n name: "Lorem",\n total: 30\n},{\n name: "Ipsum",\n total: 21\n},{\n name: "Dolor",\n total: 20\n}]',chartdataconfig:'key: "name", values: ["total"]'}}},l=c,s=e("2877"),i=Object(s["a"])(l,o,r,!1,null,null,null);a["default"]=i.exports}}]); 2 | //# sourceMappingURL=chunk-74b0551a.a3d50613.js.map -------------------------------------------------------------------------------- /docsrc/src/views/SlicesChart.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0e62b7.4876b9fb.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e62b7"],{9835:function(t,o,a){"use strict";a.r(o);var e=function(){var t=this,o=t.$createElement,a=t._self._c||o;return a("div",{staticClass:"page"},[a("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),a("section",{staticClass:"chart"},[a("D3WordsCloud",{attrs:{config:t.chartconfig,datum:t.chartdata,title:"Lorem ipsum dolor sit amet"}})],1),t._m(0),a("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/wordscloud/d3.wordscloud.js"}}),a("ChartTemplateComponent",{attrs:{template:t.chartcode}}),a("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),a("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),a("ChartColorComponent"),a("ChartStylesComponent",{attrs:{classname:"wordcloud"}})],1)},r=[function(){var t=this,o=t.$createElement,a=t._self._c||o;return a("section",{staticClass:"text text--center"},[a("br"),t._v("This chart uses "),a("a",{attrs:{href:"https://github.com/jasondavies/d3-cloud"}},[t._v("d3-clouds")]),t._v(", developed by "),a("a",{attrs:{href:"https://www.jasondavies.com/"}},[t._v("Jason Davies")]),t._v(". ")])}],s=(a("99af"),a("2dd5")),c={name:"WordsCloud",components:{D3WordsCloud:s["g"]},data:function(){return{chartname:"D3WordsCloud",chartdesc:"A words cloud is a visual representation of text data, typically used to depict keyword metadata.",chartcode:'',chartoptions:["margin","color","transition","fontFamily","angle"],chartcustomoptions:{angle:{type:"Object or Array",desc:"Word's angle configuration options (in degrees).",example:"angle: [-90, -45, 0, 45, 90]"}},chartconfig:{key:"word",value:"size",color:{scheme:"schemeTableau10"},angle:[0,90]},chartdata:[{word:"Lorem",size:60},{word:"Ipsum",size:10},{word:"Dolor",size:20},{word:"Sit",size:50},{word:"Amet",size:30}],chartdatadesc:"An objects array is expected, with each object as a words",chartdatacode:'chart_data = [{\n word: "Lorem",\n size: 30\n},{\n word: "Ipsum",\n size: 23\n},{\n word: "Dolor",\n size: 64\n}]',chartdataconfig:'key: "word", value: "size"'}},mounted:function(){var t=this;setTimeout((function(){t.chartdata=t.chartdata.concat([{word:"Consectetur",size:20},{word:"Adipiscing",size:30},{word:"Elit",size:10}])}),2e3),setTimeout((function(){t.chartdata=t.chartdata.concat([{word:"Sed",size:12},{word:"Do",size:20},{word:"Eiusmod",size:40},{word:"Tempor",size:45},{word:"Incididunt",size:30}])}),4e3),setTimeout((function(){t.chartdata=t.chartdata.concat([{word:"Ut",size:20},{word:"Labore",size:60},{word:"Et",size:15},{word:"Dolore",size:35},{word:"Magna",size:50},{word:"Aliqua",size:25}])}),6e3)}},d=c,n=a("2877"),i=Object(n["a"])(d,e,r,!1,null,null,null);o["default"]=i.exports}}]); 2 | //# sourceMappingURL=chunk-2d0e62b7.4876b9fb.js.map -------------------------------------------------------------------------------- /docsrc/src/components/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // Page components 4 | Vue.component('HeaderComponent', require('./HeaderComponent').default); 5 | Vue.component('FooterComponent', require('./FooterComponent').default); 6 | Vue.component('ChartIndexComponent', require('./ChartIndexComponent').default); 7 | 8 | // Chart's documentation components 9 | Vue.component('ChartStylesComponent', require('./ChartStylesComponent').default); 10 | Vue.component('ChartColorComponent', require('./ChartColorComponent').default); 11 | Vue.component('ChartConfigComponent', require('./ChartConfigComponent').default); 12 | Vue.component('ChartDataComponent', require('./ChartDataComponent').default); 13 | Vue.component('ChartTemplateComponent', require('./ChartTemplateComponent').default); 14 | Vue.component('ChartImportComponent', require('./ChartImportComponent').default); 15 | Vue.component('ChartTitleComponent', require('./ChartTitleComponent').default); 16 | 17 | // Charts examples 18 | Vue.component('SlopeChartExamples', require('./examples/SlopeChartExamples').default); 19 | Vue.component('SlopeChartExampleBasic', require('./examples/SlopeChartExampleBasic').default); 20 | Vue.component('SlopeChartExampleHighlight', require('./examples/SlopeChartExampleHighlight').default); 21 | Vue.component('SlopeChartExampleColors', require('./examples/SlopeChartExampleColors').default); 22 | Vue.component('SlopeChartExampleDataUpdate', require('./examples/SlopeChartExampleDataUpdate').default); 23 | 24 | Vue.component('LineChartExamples', require('./examples/LineChartExamples').default); 25 | Vue.component('LineChartExampleBasic', require('./examples/LineChartExampleBasic').default); 26 | Vue.component('LineChartExampleUpdate', require('./examples/LineChartExampleUpdate').default); 27 | Vue.component('LineChartExampleCustomization', require('./examples/LineChartExampleCustomization').default); 28 | 29 | Vue.component('BarChartExamples', require('./examples/BarChartExamples').default); 30 | Vue.component('BarChartExampleBasic', require('./examples/BarChartExampleBasic').default); 31 | Vue.component('BarChartExampleTooltipOverride', require('./examples/BarChartExampleTooltipOverride').default); 32 | Vue.component('BarChartExampleGroup', require('./examples/BarChartExampleGroup').default); 33 | Vue.component('BarChartExampleDataUpdate', require('./examples/BarChartExampleDataUpdate').default); 34 | Vue.component('BarChartExampleHorizontal', require('./examples/BarChartExampleHorizontal').default); 35 | 36 | Vue.component('PieChartExamples', require('./examples/PieChartExamples').default); 37 | Vue.component('PieChartExampleDataUpdate', require('./examples/PieChartExampleDataUpdate').default); 38 | -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0a387d.1561b119.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a387d"],{"0326":function(t,a,e){"use strict";e.r(a);var o=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"page"},[e("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),e("section",{staticClass:"chart"},[e("D3LineChart",{attrs:{config:t.chartconfig,datum:t.chartdata,title:"Lorem ipsum dolor sit amet",source:"Custom source"}})],1),e("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/linechart/d3.linechart.js"}}),e("ChartTemplateComponent",{attrs:{template:t.chartcode}}),e("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),e("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),e("ChartColorComponent"),e("ChartStylesComponent",{attrs:{classname:"linechart"}}),e("LineChartExamples")],1)},n=[],r=e("2dd5"),c={name:"LineChart",components:{D3LineChart:r["b"]},data:function(){return{chartname:"D3LineChart",chartdesc:"A line chart displays information as a series of data points connected by line segments, usually to visualize a trends over time.",chartcode:'',chartoptions:["margin","values","color","axis","points","curve","date","tooltip","transition"],chartcustomoptions:{values:{required:!0,example:'values: ["Iphone", "Android"]'},date:{required:!0,example:'date: { key: "date", inputFormat: "%Y", outputFormat: "%Y"}'},axis:{default:'axis: {\n yTitle: false,\n xTitle: false,\n yFormat: ".0f",\n xFormat: "%Y-%m-%d",\n yTicks: 5,\n xTicks: 3\n }'},margin:{default:"margin: {\n top: 20,\n right: 20,\n bottom: 20,\n left: 40\n }"}},chartconfig:{values:["hours","production"],date:{key:"date",inputFormat:"%Y",outputFormat:"%Y"},tooltip:{labels:["Hour","Production"]},axis:{yFormat:".0f",yTicks:10,yTitle:"Lorem ipsum"},color:{scheme:["#41B882","#222f3e"]},curve:"curveCardinal",transition:{ease:"easeBounceOut",duration:1e3}},chartdata:[{hours:238,production:134,date:2e3},{hours:938,production:478,date:2001},{hours:1832,production:1392,date:2002},{hours:2092,production:2343,date:2003},{hours:2847,production:2346,date:2004},{hours:2576,production:2233,date:2005},{hours:2524,production:2325,date:2006},{hours:1648,production:2456,date:2007},{hours:2479,production:2329,date:2008},{hours:3200,production:2438,date:2009}],chartdatadesc:"An objects array is expected, with each object as an interval in the horizontal axis",chartdatacode:'chart_data = [{\n "iphone": 123,\n "android": 208,\n "when": "2019-08-01"\n},{\n "iphone": 165,\n "android": 201,\n "when": "2019-09-01"\n}]',chartdataconfig:'date: { key: "when", inputFormat: "%Y-%m-%d"}, values: ["iphone","android"]'}}},i=c,s=e("2877"),d=Object(s["a"])(i,o,n,!1,null,null,null);a["default"]=d.exports}}]); 2 | //# sourceMappingURL=chunk-2d0a387d.1561b119.js.map -------------------------------------------------------------------------------- /docsrc/src/components/examples/LineChartExampleBasic.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExampleGroup.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/LineChartExampleCustomization.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docsrc/src/views/BarChart.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /docsrc/src/views/PieChart.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 35 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/PieChartExampleDataUpdate.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docsrc/src/views/SlopeChart.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /docs/img/icons/D3SlopeChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 74 | 80 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/SlopeChartExampleDataUpdate.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3SlopeChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 74 | 80 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExampleDataUpdate.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/public/js/chunk-b7d79802.be2d9b19.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-b7d79802"],{"4de4":function(t,a,e){"use strict";var n=e("23e7"),r=e("b727").filter,o=e("1dde");n({target:"Array",proto:!0,forced:!o("filter")},{filter:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}})},b0c0:function(t,a,e){var n=e("83ab"),r=e("9bf2").f,o=Function.prototype,c=o.toString,s=/^\s*function ([^ (]*)/,i="name";!n||i in o||r(o,i,{configurable:!0,get:function(){try{return c.call(this).match(s)[1]}catch(t){return""}}})},b727:function(t,a,e){var n=e("f8c2"),r=e("44ad"),o=e("7b0b"),c=e("50c4"),s=e("65f0"),i=[].push,d=function(t){var a=1==t,e=2==t,d=3==t,h=4==t,u=6==t,m=5==t||u;return function(l,p,f,C){for(var g,y,b=o(l),v=r(b),x=n(p,f,3),S=c(v.length),w=0,D=C||s,k=a?D(l,S):e?D(l,0):void 0;S>w;w++)if((m||w in v)&&(g=v[w],y=x(g,w,b),t))if(a)k[w]=y;else if(y)switch(t){case 3:return!0;case 5:return g;case 6:return w;case 2:i.call(k,g)}else if(h)return!1;return u?-1:d||h?h:k}};t.exports={forEach:d(0),map:d(1),filter:d(2),some:d(3),every:d(4),find:d(5),findIndex:d(6)}},c8e0:function(t,a,e){"use strict";e.r(a);var n=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"page"},[e("ChartTitleComponent",{attrs:{name:t.chartname,desc:t.chartdesc}}),e("section",{staticClass:"chart"},[e("D3SlopeChart",{attrs:{config:t.chartconfig,datum:t.chartdata,title:"Lorem ipsum",source:"Dolor sit amet"}})],1),e("ChartImportComponent",{attrs:{code:t.chartname,link:"https://github.com/Saigesp/vue-d3-charts/blob/master/src/slopechart/d3.slopechart.js"}}),e("ChartTemplateComponent",{attrs:{template:t.chartcode}}),e("ChartDataComponent",{attrs:{desc:t.chartdatadesc,code:t.chartdatacode,config:t.chartdataconfig}}),e("ChartConfigComponent",{attrs:{options:t.chartoptions,custom:t.chartcustomoptions}}),e("ChartColorComponent"),e("ChartStylesComponent",{attrs:{classname:"slopechart"}}),e("SlopeChartExamples")],1)},r=[],o=(e("99af"),e("4de4"),e("b0c0"),e("2dd5")),c={name:"SlopeChart",components:{D3SlopeChart:o["e"]},data:function(){return{chartname:"D3SlopeChart",chartdesc:"A slope chart displays information as a series of lines between two points.",chartcode:'',chartoptions:["margin","key","currentKey","values","color","opacity","transition","axis","points"],chartcustomoptions:{axis:{default:"axis: {\n titles: false\n }",desc:"Axis custom properties.",example:'axis: {titles: ["Yesterday", "Today"]}'},margin:{default:"margin: {\n top: 10,\n right: 100,\n bottom: 20,\n left: 100\n }"}},chartconfig:{key:"name",currentKey:"Lorem",color:{current:"#41B882"},axis:{titles:["2000","2015"]},transition:{ease:"easeBounceOut",duration:1e3}},chartdata:[{start:5355,end:5855,name:"Lorem"},{start:6160,end:6510,name:"Ipsum"},{start:3029,end:5138,name:"Dolor"},{start:2116,end:2904,name:"Sit"},{start:3503,end:4408,name:"Amet"}],chartdatadesc:"An objects array is expected, with each object as a line",chartdatacode:'chart_data = [{\n yesterday: 5355,\n today: 5855,\n name: "Lorem"\n},{\n yesterday: 6160,\n today: 6510,\n name: "Ipsum"\n}]',chartdataconfig:'key: "name", values: ["yesterday","today"]'}},mounted:function(){var t=this;setTimeout((function(){t.chartdata=t.chartdata.filter((function(t){return"Lorem"!=t.name})),t.chartdata.push({start:5085,end:9321,name:"Lorem"})}),2e3),setTimeout((function(){t.chartdata=t.chartdata.filter((function(t){return"Sit"!=t.name}))}),4e3),setTimeout((function(){t.chartdata=t.chartdata.concat([{start:7500,end:9960,name:"Aperiam"}])}),6e3)}},s=c,i=e("2877"),d=Object(i["a"])(s,n,r,!1,null,null,null);a["default"]=d.exports}}]); 2 | //# sourceMappingURL=chunk-b7d79802.be2d9b19.js.map -------------------------------------------------------------------------------- /docs/img/icons/D3LineChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 75 | 81 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3LineChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 75 | 81 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/LineChartExampleUpdate.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docsrc/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 92 | -------------------------------------------------------------------------------- /docsrc/src/views/WordsCloud.vue: -------------------------------------------------------------------------------- 1 | 30 | 113 | -------------------------------------------------------------------------------- /docsrc/src/views/Sunburst.vue: -------------------------------------------------------------------------------- 1 | 26 | 133 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExampleTooltipOverride.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/img/icons/D3Sunburst.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 75 | 81 | 87 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3Sunburst.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 75 | 81 | 87 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /docsrc/src/components/examples/BarChartExampleBasic.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docsrc/src/components/ChartColorComponent.vue: -------------------------------------------------------------------------------- 1 | 93 | -------------------------------------------------------------------------------- /docsrc/src/views/LineChart.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/img/icons/D3SlicesChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 61 | 67 | 73 | 79 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /docsrc/public/img/icons/D3SlicesChart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 61 | 67 | 73 | 79 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /CONTRIB.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | This repository contains the charts components library (on `/src`) and the demo/documentation page (on `/docsrc` and `/docs` folders). 4 | 5 | ### Create a new chart 6 | 7 | ##### Definition of done 8 | - Charts have to follow the common schemes. 9 | - Data and configuration have to be updatable. 10 | - Charts have to be responsive and resizable. 11 | - Charts have to be documented and with examples. 12 | 13 | #### Create chart 14 | 15 | 1. Create a new folder `/src/mynewchart` with files `d3.mynewchart.vue` and `d3.mynewchart.js` 16 | 17 | **d3.mynewchart.js** is the chart's vanilla javascript file (isolated from any JS framework). 18 | **d3.mynewchart.vue** is the vue component wrapper. 19 | 20 | 2. **d3.mynewchart.js** must instantiate `/src/d3.chart.js` class, which contains common charts features, action pipes and methods: 21 | 22 | ```javascript 23 | import d3chart from '../d3.chart' 24 | //... 25 | class d3mynewchart extends d3chart{ 26 | //... 27 | } 28 | export default d3mynewchart 29 | ``` 30 | 31 | This class is expected to contain some methods, which will be called from the main pipes. A basic schema may be: 32 | 33 | ```javascript 34 | import d3chart from '../d3.chart' 35 | //... 36 | 37 | class d3mynewchart extends d3chart{ 38 | 39 | constructor(selection, data, config) { 40 | super(selection, data, config, { // Default configuration options 41 | }) 42 | } 43 | 44 | initChart() { 45 | // Chart initialization 46 | } 47 | 48 | setChartDimension(){ 49 | // Set up chart dimensions (non depending on data) 50 | } 51 | 52 | setScales(){ 53 | // Set up scales 54 | } 55 | 56 | bindData(){ 57 | // Data binding 58 | } 59 | 60 | enterElements(){ 61 | // Elements to add 62 | } 63 | 64 | updateElements(){ 65 | // Elements to update 66 | } 67 | 68 | exitElements(){ 69 | // Elements to remove 70 | } 71 | } 72 | 73 | export default d3mynewchart 74 | ``` 75 | > See [d3.chart.js](/src/d3.chart.js) for more detail, or [d3.barchart.js](/src/barchart/d3.barchart.js) for an example. 76 | 77 | 2. **d3.mynewchart.vue** is the single file component that interacts with the chart. It extends `/src/d3.chart.vue`: 78 | ```javascript 79 | import D3Chart from '../d3.chart.vue'; 80 | import d3mynewchart from './d3.mynewchart'; 81 | 82 | export default { 83 | name: 'D3MyNewChart', 84 | extends: D3Chart, 85 | mounted() { 86 | this.chart = new d3mynewchart( 87 | this.$refs.chart, 88 | JSON.parse(JSON.stringify(this.datum)), 89 | this.config, 90 | ); 91 | }, 92 | }; 93 | ``` 94 | > See [d3.barchart.vue](/src/barchart/d3.barchart.vue) for an example. 95 | 96 | 3. Add component to `/src/index.js`: 97 | 98 | ```javascript 99 | export { default as D3Mynewchart } from './mynewchart/d3.mynewchart.vue'; 100 | ``` 101 | 102 | 3. Build package: 103 | ```bash 104 | npm run build 105 | ``` 106 | 107 | #### Create demo and documentation pages 108 | 109 | 4. In order to develop the new additions demo and documentation, replace `/docsrc` vue-d3-charts node module: 110 | ``` 111 | npm run build 112 | rm -rf docsrc/node_modules/vue-d3-charts/dist/ 113 | cp -r dist/ docsrc/node_modules/vue-d3-charts/ 114 | ``` 115 | 116 | 5. Create a new vue component to act as chart's view in `/docsrc/src/views` 117 | 118 | 6. Add it to `/docs/router/index.js` 119 | 120 | 7. Develop documentation page and examples (TBD) 121 | 122 | 8. Once documentation page is finished, build it: 123 | ```bash 124 | cd docsrc/ 125 | rm -rf node_modules/vue-d3-charts/ && npm i # update charts components 126 | npm run build 127 | ``` 128 | 129 | ## Demo and documentation page 130 | 131 | Documentation source files are located in `/docsrc` folder, and compiles to `/docs`. 132 | 133 | It has `"vue-d3-charts": "../",` as dependency in package.json 134 | 135 | #### Get new components on demo page 136 | 137 | ```bash 138 | cd docsrc/ 139 | rm -rf node_modules/vue-d3-charts/ && npm i 140 | ``` 141 | 142 | ##### Serve files 143 | ```bash 144 | cd docsrc/ 145 | npm run dev 146 | ``` 147 | 148 | ##### Build files 149 | ```bash 150 | cd docsrc/ 151 | npm run build 152 | ``` -------------------------------------------------------------------------------- /docs/public/js/chunk-2d2082c5.86c27c45.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/Examples.vue?f66f","webpack:///src/views/Examples.vue","webpack:///./src/views/Examples.vue?a645","webpack:///./src/views/Examples.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","directives","name","rawName","value","expression","on","$event","$$selectedVal","Array","prototype","filter","call","target","options","o","selected","map","val","_value","currentComponent","multiple","_l","chart","domProps","component","_s","tag","_e","staticRenderFns","data","charts"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,UAAU,CAACE,YAAY,WAAW,CAACF,EAAG,KAAK,CAACE,YAAY,eAAe,CAACN,EAAIO,GAAG,cAAcH,EAAG,IAAI,CAACE,YAAY,eAAe,CAACN,EAAIO,GAAG,uCAAuCH,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAACF,EAAG,SAAS,CAACI,WAAW,CAAC,CAACC,KAAK,QAAQC,QAAQ,UAAUC,MAAOX,EAAoB,iBAAEY,WAAW,qBAAqBC,GAAG,CAAC,OAAS,SAASC,GAAQ,IAAIC,EAAgBC,MAAMC,UAAUC,OAAOC,KAAKL,EAAOM,OAAOC,SAAQ,SAASC,GAAG,OAAOA,EAAEC,YAAWC,KAAI,SAASF,GAAG,IAAIG,EAAM,WAAYH,EAAIA,EAAEI,OAASJ,EAAEX,MAAM,OAAOc,KAAOzB,EAAI2B,iBAAiBb,EAAOM,OAAOQ,SAAWb,EAAgBA,EAAc,MAAMf,EAAI6B,GAAI7B,EAAU,QAAE,SAAS8B,GAAO,OAAO1B,EAAG,SAAS,CAAC2B,SAAS,CAAC,MAAQD,EAAME,YAAY,CAAChC,EAAIO,GAAGP,EAAIiC,GAAGH,EAAMrB,YAAW,OAAQT,EAAoB,iBAAEI,EAAG,MAAM,CAACA,EAAGJ,EAAI2B,iBAAiB,CAACO,IAAI,eAAe,GAAGlC,EAAImC,QACv8BC,EAAkB,GCqBtB,GACE3B,KAAM,WACN4B,KAFF,WAGI,MAAO,CACLV,kBAAkB,EAClBW,OAAQ,CACd,CAAQ,KAAR,YAAQ,UAAR,oBACA,CAAQ,KAAR,YAAQ,UAAR,oBACA,CAAQ,KAAR,aAAQ,UAAR,qBACA,CAAQ,KAAR,cAAQ,UAAR,0BC/BkV,I,YCO9UN,EAAY,eACd,EACAjC,EACAqC,GACA,EACA,KACA,KACA,MAIa,aAAAJ,E","file":"public/js/chunk-2d2082c5.86c27c45.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"page\"},[_c('section',{staticClass:\"example\"},[_c('h2',{staticClass:\"page__title\"},[_vm._v(\"Examples\")]),_c('p',{staticClass:\"page__claim\"},[_vm._v(\"Select chart to see code examples\")]),_c('div',{staticClass:\"example__controls\"},[_c('select',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.currentComponent),expression:\"currentComponent\"}],on:{\"change\":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = \"_value\" in o ? o._value : o.value;return val}); _vm.currentComponent=$event.target.multiple ? $$selectedVal : $$selectedVal[0]}}},_vm._l((_vm.charts),function(chart){return _c('option',{domProps:{\"value\":chart.component}},[_vm._v(_vm._s(chart.name))])}),0)])]),(_vm.currentComponent)?_c('div',[_c(_vm.currentComponent,{tag:\"component\"})],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Examples.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Examples.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Examples.vue?vue&type=template&id=da1c78ea&\"\nimport script from \"./Examples.vue?vue&type=script&lang=js&\"\nexport * from \"./Examples.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /docsrc/src/assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap'); 2 | 3 | .align-center { text-align: center;} 4 | .align-right { text-align: right;} 5 | .align-left { text-align: left;} 6 | 7 | html { 8 | background: #222f3e; 9 | } 10 | 11 | body { 12 | background: #f7f7f7; 13 | } 14 | 15 | code { 16 | border-radius: 5px; 17 | background: #f5f2f0; 18 | font-size: 12px; 19 | padding: 2px 5px; 20 | } 21 | 22 | pre { 23 | border: 0; 24 | margin-bottom: 24px !important; 25 | code { 26 | display: block; 27 | font-size: inherit; 28 | } 29 | &.align-center { 30 | text-align: center !important; 31 | display: flex; 32 | justify-content: center; 33 | background: transparent !important; 34 | code { 35 | background: #f5f2f0 !important; 36 | padding: 12px 24px; 37 | border-radius: 24px; 38 | display: inline-block; 39 | } 40 | } 41 | } 42 | 43 | .page { 44 | overflow: hidden; 45 | &--header { 46 | background: #41B882; 47 | color: #222f3e; 48 | .page__title { 49 | margin-top: 40px; 50 | font-size: 48px; 51 | cursor: pointer; 52 | transition: opacity 200ms ease; 53 | a { 54 | color: inherit; 55 | } 56 | &:hover { 57 | opacity: 0.7; 58 | } 59 | } 60 | .page__subtitle { 61 | cursor: default; 62 | } 63 | } 64 | &__title { 65 | text-align: center; 66 | font-size: 36px; 67 | } 68 | &__subtitle { 69 | text-align: center; 70 | font-size: 24px; 71 | } 72 | &__claim { 73 | text-align: center; 74 | } 75 | h1, h2, h3, h4, h5, h6 { 76 | color: #222f3e; 77 | } 78 | h1, h2 { 79 | text-align: center; 80 | } 81 | h3 { 82 | margin-top: 0; 83 | margin-bottom: 20px; 84 | } 85 | ul { 86 | margin-bottom: 24px; 87 | } 88 | table { 89 | border: 0; 90 | tr, td { 91 | border: 0; 92 | } 93 | td { 94 | padding: 4px 7px; 95 | line-height: 1.3; 96 | } 97 | } 98 | section { 99 | max-width: 870px; 100 | padding: 20px; 101 | margin: 0 auto 40px; 102 | &.text { 103 | &--center { 104 | text-align: center; 105 | } 106 | } 107 | &.title { 108 | margin-bottom: 0; 109 | } 110 | &.chart { 111 | margin: 40px auto; 112 | } 113 | &.code { 114 | > pre { 115 | display: block; 116 | margin-bottom: 24px; 117 | } 118 | .note { 119 | border-left: 4px solid #e5e5e5; 120 | padding-left: 10px; 121 | line-height: 28px; 122 | color: #7d7d7d; 123 | } 124 | } 125 | &.examples { 126 | > div { 127 | margin-top: 180px; 128 | &:first-of-type { 129 | margin-top: 20px; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | .example { 137 | &__controls { 138 | text-align: center; 139 | margin-bottom: 24px; 140 | input { 141 | background: #f5f2f0; 142 | border: 1px solid #e6e2df; 143 | padding: 10px 17px; 144 | margin-right: 4px; 145 | } 146 | select { 147 | background: #f5f2f0; 148 | border: 1px solid #e6e2df; 149 | padding: 10px 17px; 150 | margin-right: 4px; 151 | } 152 | button { 153 | border: 0; 154 | border-radius: 60px; 155 | background: #42b983; 156 | color: #fff; 157 | font-weight: 600; 158 | font-size: 0.9em; 159 | text-align: center; 160 | padding: 8px 12px; 161 | display: inline-block; 162 | vertical-align: middle; 163 | min-width: 140px; 164 | transition: background-color 200ms ease, border-color 200ms ease; 165 | border: 2px solid transparent; 166 | margin: 0 2px 4px; 167 | &:focus, 168 | &:hover { 169 | outline: 0; 170 | background-color: #2d885f; 171 | } 172 | &:active { 173 | border-color: #42b983; 174 | background-color: #2d885f; 175 | } 176 | } 177 | } 178 | } 179 | 180 | 181 | -------------------------------------------------------------------------------- /docsrc/src/assets/styles/reset.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;} 2 | article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display: block;font-family:'Source Sans Pro', sans-serif; } 3 | audio,canvas,video {display: inline-block;max-width: 100%;} 4 | html{-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;} 5 | body,button,input,select,textarea {color: #1b1b1b;font-family: 'Source Sans Pro', sans-serif;font-size: 16px;font-weight: 400;line-height: 1.5;} 6 | body{height: 100%;} 7 | a{color: #087be3;text-decoration: none;cursor: pointer;} 8 | a:focus {outline: 0;color: #08c1e3;} 9 | a:hover,a:active {outline: 0;} 10 | a:active,a:hover {color: #065fb0;} 11 | h1,h2,h3,h4,h5,h6{font-family:'Source Sans Pro', sans-serif; clear: both;font-weight: 700;margin: 36px 0 12px;} 12 | h1{font-size: 42px;line-height: 1.3846153846;} 13 | h2{font-size: 36px;line-height: 1;} 14 | h3{font-size: 28px;line-height: 1.0909090909;} 15 | h4{font-size: 16px;line-height: 1.2; text-transform: uppercase;} 16 | h5{font-size: 14px;line-height: 1.3333333333;} 17 | h6{font-size: 10px;line-height: 1.3333333333;} 18 | address{font-style: italic;margin-bottom: 24px;} 19 | abbr[title]{border-bottom: 1px dotted #1b1b1b;cursor: help;} 20 | b,strong{font-weight: 700;} 21 | cite,dfn,em,i{font-style: italic;} 22 | mark,ins{background: #fff9c0;text-decoration: none;} 23 | p{margin-bottom: 24px; word-wrap: break-word;} 24 | code,kbd,tt,var,samp,pre{font-family: monospace, serif;font-size: 15px;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens:none;hyphens:none;line-height: 1.6;} 25 | pre{border: 1px solid rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom: 24px;max-width: 100%;overflow: auto;padding: 12px;white-space: pre;white-space: pre-wrap;word-wrap: break-word;} 26 | blockquote,q {-webkit-hyphens: none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;quotes: none;} 27 | blockquote:before,blockquote:after,q:before,q:after {content: "";content: none;} 28 | blockquote {color: #767676;font-size: 19px;font-style: italic;font-weight: 300;line-height: 1.2631578947;margin-bottom: 24px;} 29 | blockquote cite,blockquote small {color: #1b1b1b;font-size: 16px;font-weight: 400;line-height: 1.5;} 30 | blockquote em,blockquote i,blockquote cite {font-style: normal;} 31 | blockquote strong,blockquote b {font-weight: 400;} 32 | small {font-size: smaller;} 33 | big {font-size: 125%;} 34 | sup,sub {font-size: 75%;height: 0;line-height: 0;position: relative;vertical-align: baseline;} 35 | sup {bottom: 1ex;}sub {top: .5ex;}dl {margin-bottom: 24px;}dt {font-weight: bold;}dd {margin-bottom: 24px;}ul,ol {list-style: none;margin: 0 0 24px 20px;} 36 | ul {list-style: disc;}ol{list-style: decimal;}li > ul,li > ol {margin: 0 0 0 20px;} 37 | img {-ms-interpolation-mode: bicubic;border: 0;vertical-align: middle;} 38 | figure{margin: 0;}fieldset {border: 1px solid rgba(0, 0, 0, 0.1);margin: 0 0 24px;padding: 11px 12px 0;} 39 | legend {white-space: normal;} 40 | button,input,select,textarea {-webkit-box-sizing: border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size: 100%;margin: 0;max-width: 100%;vertical-align: baseline;} 41 | button,input {line-height: normal;} 42 | input,textarea {background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));} 43 | button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;} 44 | button[disabled],input[disabled] {cursor: default;} 45 | input[type="checkbox"],input[type="radio"] {padding: 0;} 46 | input[type="search"] {-webkit-appearance: textfield;} 47 | input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} 48 | button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;} 49 | textarea {overflow: auto;vertical-align: top;} 50 | table,th,td {border: 1px solid rgba(0, 0, 0, 0.1);} 51 | table {border-collapse: separate;border-spacing: 0;border-width: 1px 0 0 1px;width: 100%;} 52 | caption,th,td { font-weight: normal;text-align: left;}th {border-width: 0 1px 1px 0;font-weight: bold;} 53 | td {border-width: 0 1px 1px 0;}del {color: #767676;}hr {background-color: rgba(0, 0, 0, 0.1);border: 0;height: 1px;margin-top: 20px; margin-bottom: 30px;} 54 | ::selection {background: #087be3;color: white;text-shadow: none;} 55 | ::-moz-selection {background: #087be3;color: white;text-shadow: none;} 56 | ul,li {list-style: none;margin: 0;padding: 0;} 57 | mark, ins {background: transparent; text-decoration: none;} 58 | .clear{clear: both;} 59 | .hidden{display: none !important;} -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0df447.c5f955b4.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/SlicesChart.vue?cbce","webpack:///src/views/SlicesChart.vue","webpack:///./src/views/SlicesChart.vue?c7e8","webpack:///./src/views/SlicesChart.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","chartname","chartdesc","chartconfig","chartdata","chartcode","chartdatadesc","chartdatacode","chartdataconfig","chartoptions","chartcustomoptions","staticRenderFns","name","components","D3SlicesChart","data","radius","required","key","value","color","transition","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,sBAAsB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAOR,EAAIS,aAAaL,EAAG,UAAU,CAACE,YAAY,SAAS,CAACF,EAAG,gBAAgB,CAACG,MAAM,CAAC,OAASP,EAAIU,YAAY,MAAQV,EAAIW,cAAc,GAAGP,EAAG,uBAAuB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAO,4FAA4FJ,EAAG,yBAAyB,CAACG,MAAM,CAAC,SAAWP,EAAIY,aAAaR,EAAG,qBAAqB,CAACG,MAAM,CAAC,KAAOP,EAAIa,cAAc,KAAOb,EAAIc,cAAc,OAASd,EAAIe,mBAAmBX,EAAG,uBAAuB,CAACG,MAAM,CAAC,QAAUP,EAAIgB,aAAa,OAAShB,EAAIiB,sBAAsBb,EAAG,uBAAuBA,EAAG,uBAAuB,CAACG,MAAM,CAAC,UAAY,cAAc,SAAW,CAAC,QAAS,aAAa,IACl2BW,EAAkB,G,YC8BtB,GACEC,KAAM,cACNC,WAAY,CACVC,cAAJ,QAEEC,KALF,WAMI,MAAO,CACLd,UAAW,gBACXC,UAAW,6EACXG,UAAW,6EACXI,aAAc,CAAC,SAAU,MAAO,QAAS,QAAS,aAAc,UAChEC,mBAAoB,CAClBM,OAAQ,CACNC,UAAU,IAGdd,YAAa,CACXe,IAAK,OACLC,MAAO,QACPC,MAAO,CAAf,4BACQJ,OAAQ,CAAhB,8BACQK,WAAY,CAApB,eAEMjB,UAAW,CACjB,CAAQ,KAAR,QAAQ,MAAR,GAAQ,MAAR,WACA,CAAQ,KAAR,QAAQ,MAAR,IAAQ,MAAR,WACA,CAAQ,KAAR,QAAQ,MAAR,IAAQ,MAAR,WACA,CAAQ,KAAR,MAAQ,MAAR,IAAQ,MAAR,WACA,CAAQ,KAAR,OAAQ,MAAR,IAAQ,MAAR,WACA,CAAQ,KAAR,QAAQ,MAAR,IAAQ,MAAR,YAEME,cAAe,6EACfC,cAAe,6HAUfC,gBAAiB,8CCzE8T,I,YCOjVc,EAAY,eACd,EACA9B,EACAmB,GACA,EACA,KACA,KACA,MAIa,aAAAW,E","file":"public/js/chunk-2d0df447.c5f955b4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"page\"},[_c('ChartTitleComponent',{attrs:{\"name\":_vm.chartname,\"desc\":_vm.chartdesc}}),_c('section',{staticClass:\"chart\"},[_c('D3SlicesChart',{attrs:{\"config\":_vm.chartconfig,\"datum\":_vm.chartdata}})],1),_c('ChartImportComponent',{attrs:{\"code\":_vm.chartname,\"link\":\"https://github.com/Saigesp/vue-d3-charts/blob/master/src/sliceschart/d3.sliceschart.js\"}}),_c('ChartTemplateComponent',{attrs:{\"template\":_vm.chartcode}}),_c('ChartDataComponent',{attrs:{\"desc\":_vm.chartdatadesc,\"code\":_vm.chartdatacode,\"config\":_vm.chartdataconfig}}),_c('ChartConfigComponent',{attrs:{\"options\":_vm.chartoptions,\"custom\":_vm.chartcustomoptions}}),_c('ChartColorComponent'),_c('ChartStylesComponent',{attrs:{\"classname\":\"sliceschart\",\"elements\":['slice', 'label']}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SlicesChart.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SlicesChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SlicesChart.vue?vue&type=template&id=201c7e3a&\"\nimport script from \"./SlicesChart.vue?vue&type=script&lang=js&\"\nexport * from \"./SlicesChart.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /src/wordscloud/d3.wordscloud.js: -------------------------------------------------------------------------------- 1 | import d3chart from '../d3.chart' 2 | import {select, selectAll} from 'd3-selection' 3 | import {scaleOrdinal, scaleLinear} from 'd3-scale' 4 | import {max, extent} from 'd3-array' 5 | import {transition} from 'd3-transition' 6 | import * as cloud from 'd3-cloud' 7 | import {easeLinear, easePolyIn, easePolyOut, easePoly, easePolyInOut, 8 | easeQuadIn, easeQuadOut, easeQuad, easeQuadInOut, easeCubicIn, 9 | easeCubicOut, easeCubic, easeCubicInOut, easeSinIn, easeSinOut, 10 | easeSin, easeSinInOut, easeExpIn, easeExpOut, easeExp, 11 | easeExpInOut, easeCircleIn, easeCircleOut, easeCircle, 12 | easeCircleInOut, easeElasticIn, easeElastic, easeElasticOut, 13 | easeElasticInOut, easeBackIn, easeBackOut, easeBack, easeBackInOut, 14 | easeBounceIn, easeBounce, easeBounceOut, easeBounceInOut} from 'd3-ease' 15 | import {schemeCategory10, schemeAccent, schemeDark2, schemePaired, 16 | schemePastel1, schemePastel2, schemeSet1, schemeSet2, schemeSet3, 17 | schemeTableau10} from 'd3-scale-chromatic' 18 | 19 | const d3 = { select, selectAll, scaleOrdinal, scaleLinear, max, extent, transition, cloud, 20 | easeLinear, easePolyIn, easePolyOut, easePoly, easePolyInOut, 21 | easeQuadIn, easeQuadOut, easeQuad, easeQuadInOut, easeCubicIn, 22 | easeCubicOut, easeCubic, easeCubicInOut, easeSinIn, easeSinOut, 23 | easeSin, easeSinInOut, easeExpIn, easeExpOut, easeExp, 24 | easeExpInOut, easeCircleIn, easeCircleOut, easeCircle, 25 | easeCircleInOut, easeElasticIn, easeElastic, easeElasticOut, 26 | easeElasticInOut, easeBackIn, easeBackOut, easeBack, easeBackInOut, 27 | easeBounceIn, easeBounce, easeBounceOut, easeBounceInOut, 28 | schemeCategory10, schemeAccent, schemeDark2, schemePaired, schemePastel1, schemePastel2, 29 | schemeSet1, schemeSet2, schemeSet3, schemeTableau10 }; 30 | 31 | /** 32 | * D3 Words Cloud 33 | */ 34 | class d3wordscloud extends d3chart { 35 | 36 | constructor(selection, data, config) { 37 | super(selection, data, config, { 38 | margin: { top: 20, right: 20, bottom: 20, left: 20 }, 39 | key: 'word', 40 | value: 'size', 41 | fontFamily: 'Arial', 42 | angle: {steps: 2, start: 0, end: 90}, 43 | color: { key: false, keys: false, scheme: false, current: '#1f77b4', default: '#AAA', axis: '#000' }, 44 | transition: { duration: 350, ease: 'easeLinear' } 45 | }); 46 | } 47 | 48 | /** 49 | * Init chart 50 | */ 51 | initChart() { 52 | // Set up dimensions 53 | this.getDimensions(); 54 | this.initChartFrame('wordscloud'); 55 | 56 | this.gcenter = this.g.append('g'); 57 | 58 | this.setChartDimension(); 59 | this.updateChart(); 60 | } 61 | 62 | /** 63 | * Compute data before operate 64 | */ 65 | computeData(){ 66 | let layout = d3.cloud() 67 | .size([ this.cfg.width, this.cfg.height ]) 68 | .words(this.data.map(d => ({ 69 | text: d[this.cfg.key], 70 | size: d[this.cfg.value], 71 | }))) 72 | .rotate(() => this.wordsAngle(this.cfg.angle)) 73 | .font(this.cfg.fontFamily) 74 | .fontSize(d => d.size) 75 | .on("end", d => { this.tData = d; }) 76 | .start(); 77 | } 78 | 79 | /** 80 | * Set up chart dimensions (non depending on data) 81 | */ 82 | setChartDimension() { 83 | // Resize SVG element 84 | this.svg 85 | .attr("viewBox", `0 0 ${this.cfg.width+this.cfg.margin.left+this.cfg.margin.right} ${this.cfg.height+this.cfg.margin.top+this.cfg.margin.bottom}`) 86 | .attr("width", this.cfg.width + this.cfg.margin.left + this.cfg.margin.right) 87 | .attr("height", this.cfg.height + this.cfg.margin.top + this.cfg.margin.bottom); 88 | 89 | // Center element 90 | this.gcenter.attr('transform', `translate(${this.cfg.width/2}, ${this.cfg.height/2})`) 91 | } 92 | 93 | /** 94 | * Bind data to main elements groups 95 | */ 96 | bindData() { 97 | // Set transition 98 | this.transition = d3.transition('t') 99 | .duration(this.cfg.transition.duration) 100 | .ease(d3[this.cfg.transition.ease]); 101 | 102 | // Word group selection data 103 | this.wordgroup = this.gcenter 104 | .selectAll(".chart__word-group") 105 | .data(this.tData, d => d.text); 106 | } 107 | 108 | /** 109 | * Set up scales 110 | */ 111 | setScales() { 112 | if (this.cfg.color.scheme instanceof Array === true) { 113 | this.colorScale = d3.scaleOrdinal().range(this.cfg.color.scheme) 114 | } else if (typeof this.cfg.color.scheme === 'string') { 115 | this.colorScale = d3.scaleOrdinal(d3[this.cfg.color.scheme]); 116 | } 117 | } 118 | 119 | 120 | /** 121 | * Add new chart's elements 122 | */ 123 | enterElements() { 124 | 125 | // Elements to add 126 | const newwords = this.wordgroup 127 | .enter().append('g') 128 | .attr("class", "chart__word-group chart__word-group--wordscloud"); 129 | 130 | newwords.append("text") 131 | .style("font-size", d => d.size + "px") 132 | .style("font-family", d => d.font) 133 | .attr("text-anchor", "middle") 134 | .attr('fill', d => this.colorElement(d, 'text')) 135 | .attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`) 136 | .text(d => d.text); 137 | } 138 | 139 | /** 140 | * Update chart's elements based on data change 141 | */ 142 | updateElements() { 143 | this.wordgroup.selectAll('text') 144 | .data(this.tData, d => d.text) 145 | .transition(this.transition) 146 | .attr('fill', d => this.colorElement(d, 'text')) 147 | .style("font-size", d => d.size + "px") 148 | .attr("transform", d => `translate(${[d.x, d.y]})rotate(${d.rotate})`); 149 | } 150 | 151 | /** 152 | * Remove chart's elements without data 153 | */ 154 | exitElements() { 155 | this.wordgroup.exit() 156 | .transition(this.transition) 157 | .style("opacity", 0) 158 | .remove(); 159 | } 160 | 161 | /** 162 | * Word's angle 163 | */ 164 | wordsAngle(angle) { 165 | if (typeof this.cfg.angle === 'number') { 166 | // Config angle is fixed number 167 | return this.cfg.angle; 168 | } else if (typeof this.cfg.angle === 'object') { 169 | if (this.cfg.angle instanceof Array === true) { 170 | // Config angle is custom array 171 | const idx = this.randomInt(0, this.cfg.angle.length-1); 172 | return this.cfg.angle[idx]; 173 | } else { 174 | // Config angle is custom object 175 | const angle = (this.cfg.angle.end - this.cfg.angle.start) / (this.cfg.angle.steps - 1); 176 | return this.cfg.angle.start + (this.randomInt(0, this.cfg.angle.steps) * angle); 177 | } 178 | } 179 | return 0; 180 | } 181 | 182 | randomInt(min, max) { 183 | const i = Math.ceil(min); 184 | const j = Math.floor(max); 185 | return Math.floor(Math.random() * (j - i + 1)) + i; 186 | } 187 | 188 | }; 189 | 190 | export default d3wordscloud; 191 | -------------------------------------------------------------------------------- /src/d3.chart.js: -------------------------------------------------------------------------------- 1 | import {select} from 'd3-selection' 2 | 3 | const d3 = {select} 4 | 5 | /** 6 | * D3 Chart Base 7 | */ 8 | class d3chart { 9 | constructor(selection, data, config, cfg) { 10 | this.selection = d3.select(selection); 11 | this.data = data; 12 | this.cfg = cfg; 13 | this._setConfig(config); 14 | 15 | // Resize listener 16 | this.onResize = () => {this.resizeChart()} 17 | window.addEventListener("resize", this.onResize); 18 | 19 | this.initChart(); 20 | } 21 | 22 | _setConfig(config){ 23 | // Set up configuration 24 | Object.keys(config).forEach(key=> { 25 | if(config[key] instanceof Object && config[key] instanceof Array === false){ 26 | Object.keys(config[key]).forEach(sk=> { 27 | this.cfg[key][sk] = config[key][sk]; 28 | }); 29 | } else this.cfg[key] = config[key]; 30 | }); 31 | } 32 | 33 | /** 34 | * Init chart 35 | */ 36 | initChart(){ 37 | console.error('d3chart.initChart not implemented'); 38 | } 39 | 40 | /** 41 | * Resize chart pipe 42 | */ 43 | setScales(){ 44 | console.error('d3chart.setScales not implemented'); 45 | } 46 | 47 | /** 48 | * Set chart dimensional sizes 49 | */ 50 | setChartDimension(){ 51 | console.error('d3chart.setChartDimension not implemented'); 52 | } 53 | 54 | /** 55 | * Bind data to main elements groups 56 | */ 57 | bindData(){ 58 | console.error('d3.chart.bindData not implemented') 59 | } 60 | 61 | /** 62 | * Add new chart's elements 63 | */ 64 | enterElements(){ 65 | console.error('d3.chart.enterElements not implemented') 66 | } 67 | 68 | /** 69 | * Update chart's elements based on data change 70 | */ 71 | updateElements(){ 72 | console.error('d3.chart.updateElements not implemented') 73 | } 74 | 75 | /** 76 | * Remove chart's elements without data 77 | */ 78 | exitElements(){ 79 | console.error('d3.chart.exitElements not implemented') 80 | } 81 | 82 | 83 | /** 84 | * Set up chart dimensions 85 | */ 86 | getDimensions(){ 87 | this.cfg.width = parseInt(this.selection.node().offsetWidth) - this.cfg.margin.left - this.cfg.margin.right; 88 | this.cfg.height = parseInt(this.selection.node().offsetHeight)- this.cfg.margin.top - this.cfg.margin.bottom; 89 | } 90 | 91 | /** 92 | * Returns chart's data 93 | */ 94 | getData(){ 95 | return this.data; 96 | } 97 | 98 | /** 99 | * Add new data elements 100 | */ 101 | enterData(data){ 102 | this.data = this.data.concat(data); 103 | this.setScales(); 104 | this.updateChart(); 105 | } 106 | 107 | /** 108 | * Update existing data elements 109 | */ 110 | updateData(data){ 111 | this.data = [...data]; 112 | this.setScales(); 113 | this.updateChart(); 114 | } 115 | 116 | /** 117 | * Compute data before operate 118 | */ 119 | computeData(){ 120 | } 121 | 122 | /** 123 | * Remove data elements 124 | */ 125 | exitData(filter){ 126 | this.data.forEach((d,i) => { 127 | let c = 0 128 | Object.keys(filter).forEach(key => { 129 | if(filter[key] == d[key]) c++ 130 | }) 131 | if(c == Object.keys(filter).length){ 132 | this.data.splice(i,1) 133 | } 134 | }); 135 | this.setScales(); 136 | this.updateChart(); 137 | } 138 | 139 | /** 140 | * Init chart commons elements (div > svg > g; tooltip) 141 | */ 142 | initChartFrame(classname='undefined'){ 143 | // Wrapper div 144 | this.wrap = this.selection.append('div') 145 | .attr("class", "chart__wrap chart__wrap--"+classname); 146 | 147 | // SVG element 148 | this.svg = this.wrap.append('svg') 149 | .attr("class", "chart chart--"+classname); 150 | 151 | // General group for margin convention 152 | this.g = this.svg.append("g") 153 | .attr("class", "chart__margin-wrap chart__margin-wrap--"+classname) 154 | .attr("transform", `translate(${this.cfg.margin.left},${this.cfg.margin.top})`); 155 | 156 | // Tooltip 157 | this.selection.selectAll('.chart__tooltip').remove() 158 | this.tooltip = this.wrap 159 | .append('div') 160 | .attr('class', "chart__tooltip chart__tooltip--"+classname); 161 | } 162 | 163 | /** 164 | * Compute element color 165 | */ 166 | colorElement(d, key = undefined) { 167 | key = key ? key : this.cfg.key; 168 | 169 | // if key is set, return own object color key 170 | if(this.cfg.color.key) return d[this.cfg.color.key]; 171 | 172 | // base color is default one if current key is set, else current one 173 | let baseColor = this.cfg.currentKey 174 | ? this.cfg.color.default 175 | : this.cfg.color.current; 176 | 177 | // if scheme is set, base color is color scheme 178 | if(this.cfg.color.scheme){ 179 | baseColor = this.colorScale(d[key]); 180 | } 181 | 182 | // if keys is an object, base color is color key if exists 183 | if(this.cfg.color.keys 184 | && this.cfg.color.keys instanceof Object 185 | && this.cfg.color.keys instanceof Array === false) { 186 | if (typeof this.cfg.color.keys[key] == 'string') { 187 | baseColor = this.cfg.color.keys[key]; 188 | } else if (typeof this.cfg.color.keys[d[key]] == 'string') { 189 | baseColor = this.cfg.color.keys[d[key]]; 190 | } 191 | } 192 | 193 | // if current key is set and key is current, base color is current 194 | if(this.cfg.currentKey && d[this.cfg.key] === this.cfg.currentKey){ 195 | baseColor = this.cfg.color.current; 196 | } 197 | 198 | return baseColor; 199 | } 200 | 201 | /** 202 | * Update chart methods 203 | */ 204 | updateChart(){ 205 | this.computeData(); 206 | this.bindData(); 207 | this.setScales(); 208 | this.enterElements(); 209 | this.updateElements(); 210 | this.exitElements(); 211 | } 212 | 213 | /** 214 | * Resize chart methods 215 | */ 216 | resizeChart(){ 217 | this.getDimensions(); 218 | //this.setScales(); 219 | this.setChartDimension(); 220 | this.updateChart(); 221 | } 222 | 223 | /** 224 | * Update chart configuration 225 | */ 226 | updateConfig(config){ 227 | this._setConfig(config); 228 | this.resizeChart(); 229 | } 230 | 231 | /** 232 | * Destroy chart methods 233 | */ 234 | destroyChart(){ 235 | window.removeEventListener("resize", this.onResize); 236 | } 237 | 238 | } 239 | 240 | 241 | export default d3chart -------------------------------------------------------------------------------- /docs/public/js/chunk-74b0551a.a3d50613.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/BarChart.vue?cd4b","webpack:///src/views/BarChart.vue","webpack:///./src/views/BarChart.vue?738c","webpack:///./src/views/BarChart.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","chartname","chartdesc","chartconfig","chartdata","chartcode","chartdatadesc","chartdatacode","chartdataconfig","chartoptions","chartcustomoptions","staticRenderFns","name","components","D3BarChart","data","tooltip","required","default","type","desc","example","key","values","color","axis","transition","component"],"mappings":"wHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,sBAAsB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAOR,EAAIS,aAAaL,EAAG,UAAU,CAACE,YAAY,SAAS,CAACF,EAAG,aAAa,CAACG,MAAM,CAAC,OAASP,EAAIU,YAAY,MAAQV,EAAIW,UAAU,MAAQ,cAAc,OAAS,qBAAqB,GAAGP,EAAG,uBAAuB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAO,sFAAsFJ,EAAG,yBAAyB,CAACG,MAAM,CAAC,SAAWP,EAAIY,aAAaR,EAAG,qBAAqB,CAACG,MAAM,CAAC,KAAOP,EAAIa,cAAc,KAAOb,EAAIc,cAAc,OAASd,EAAIe,mBAAmBX,EAAG,uBAAuB,CAACG,MAAM,CAAC,QAAUP,EAAIgB,aAAa,OAAShB,EAAIiB,sBAAsBb,EAAG,uBAAuBA,EAAG,uBAAuB,CAACG,MAAM,CAAC,UAAY,WAAW,SAAW,CAAC,MAAO,YAAYH,EAAG,qBAAqB,IAC35Bc,EAAkB,G,YC6BtB,GACEC,KAAM,WACNC,WAAY,CACVC,WAAJ,QAEEC,KALF,WAMI,MAAO,CACLd,UAAW,aACXC,UAAW,2HACXG,UAAW,uEACXI,aAAc,CAAC,SAAU,MAAO,SAAU,QAAS,aAAc,OAAQ,gBAAiB,UAAW,aAAc,eACnHC,mBAAoB,CAClBM,QAAS,CACPC,UAAU,EACVC,QAAS,4BACTC,KAAM,SACNC,KAAM,sJACNC,QAAS,mDAGblB,YAAa,CACXmB,IAAK,OACLC,OAAQ,CAAC,SACTC,MAAO,CAAf,mBACQC,KAAM,CAAd,6DACQC,WAAY,CAApB,oCAEMtB,UAAW,CACjB,CAAQ,KAAR,OAAQ,MAAR,MACA,CAAQ,KAAR,OAAQ,MAAR,MACA,CAAQ,KAAR,OAAQ,MAAR,MACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,OACA,CAAQ,KAAR,OAAQ,MAAR,QAEME,cAAe,2EACfC,cAAe,6HAUfC,gBAAiB,iDCrF2T,I,YCO9UmB,EAAY,eACd,EACAnC,EACAmB,GACA,EACA,KACA,KACA,MAIa,aAAAgB,E","file":"public/js/chunk-74b0551a.a3d50613.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"page\"},[_c('ChartTitleComponent',{attrs:{\"name\":_vm.chartname,\"desc\":_vm.chartdesc}}),_c('section',{staticClass:\"chart\"},[_c('D3BarChart',{attrs:{\"config\":_vm.chartconfig,\"datum\":_vm.chartdata,\"title\":\"Lorem ipsum\",\"source\":\"Dolor sit amet\"}})],1),_c('ChartImportComponent',{attrs:{\"code\":_vm.chartname,\"link\":\"https://github.com/Saigesp/vue-d3-charts/blob/master/src/barchart/d3.barchart.js\"}}),_c('ChartTemplateComponent',{attrs:{\"template\":_vm.chartcode}}),_c('ChartDataComponent',{attrs:{\"desc\":_vm.chartdatadesc,\"code\":_vm.chartdatacode,\"config\":_vm.chartdataconfig}}),_c('ChartConfigComponent',{attrs:{\"options\":_vm.chartoptions,\"custom\":_vm.chartcustomoptions}}),_c('ChartColorComponent'),_c('ChartStylesComponent',{attrs:{\"classname\":\"barchart\",\"elements\":['bar', 'label']}}),_c('BarChartExamples')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarChart.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BarChart.vue?vue&type=template&id=139932b6&\"\nimport script from \"./BarChart.vue?vue&type=script&lang=js&\"\nexport * from \"./BarChart.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/public/js/chunk-2d0be166.0e330607.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/views/Sunburst.vue?9c87","webpack:///src/views/Sunburst.vue","webpack:///./src/views/Sunburst.vue?b097","webpack:///./src/views/Sunburst.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","chartname","chartdesc","chartconfig","chartdata","chartcode","chartdatadesc","chartdatacode","chartdataconfig","chartoptions","staticRenderFns","name","components","D3Sunburst","data","key","value","color","keys","one","two","four","lorem","ipsum","transition","children","mounted","setTimeout","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,sBAAsB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAOR,EAAIS,aAAaL,EAAG,UAAU,CAACE,YAAY,SAAS,CAACF,EAAG,aAAa,CAACG,MAAM,CAAC,OAASP,EAAIU,YAAY,MAAQV,EAAIW,UAAU,MAAQ,iCAAiC,GAAGP,EAAG,uBAAuB,CAACG,MAAM,CAAC,KAAOP,EAAIQ,UAAU,KAAO,sFAAsFJ,EAAG,yBAAyB,CAACG,MAAM,CAAC,SAAWP,EAAIY,aAAaR,EAAG,qBAAqB,CAACG,MAAM,CAAC,KAAOP,EAAIa,cAAc,KAAOb,EAAIc,cAAc,OAASd,EAAIe,mBAAmBX,EAAG,uBAAuB,CAACG,MAAM,CAAC,QAAUP,EAAIgB,gBAAgBZ,EAAG,uBAAuBA,EAAG,uBAAuB,CAACG,MAAM,CAAC,UAAY,eAAe,IAC7zBU,EAAkB,G,YC2BtB,GACEC,KAAM,WACNC,WAAY,CACVC,WAAJ,QAEEC,KALF,WAMI,MAAO,CACLb,UAAW,aACXC,UAAW,qFACXG,UAAW,uEACXI,aAAc,CAAC,SAAU,MAAO,QAAS,QAAS,cAClDN,YAAa,CACXY,IAAK,OACLC,MAAO,QACPC,MAAO,CACLC,KAAV,CACYC,IAAK,UACLC,IAAK,UACLC,KAAM,UACNC,MAAO,UACPC,MAAO,YAGXC,WAAY,CAApB,eAEMpB,UAAW,CAAC,CACVO,KAAM,MACNc,SAAU,CAAC,CACTd,KAAM,MACNK,MAAO,MACjB,CACUL,KAAM,OACNK,MAAO,QAGXV,cAAe,yEACfC,cAAe,kNAafC,gBAAiB,6CAGrBkB,QApDF,WAoDA,WACIC,YAAW,WACT,EAAN,YACQhB,KAAM,MACNc,SAAU,CAAC,CACTd,KAAM,MACNc,SAAU,CACpB,CAAY,KAAZ,QAAY,MAAZ,KACA,CAAY,KAAZ,QAAY,MAAZ,QAEA,CACUd,KAAM,OACNK,MAAO,WAGjB,KAEIW,YAAW,WACT,EAAN,YACQhB,KAAM,MACNc,SAAU,CAAC,CACTd,KAAM,MACNc,SAAU,CACpB,CAAY,KAAZ,QAAY,MAAZ,MACA,CAAY,KAAZ,QAAY,MAAZ,KACA,CAAY,KAAZ,QAAY,MAAZ,QAEA,CACUd,KAAM,OACNK,MAAO,WAGjB,KAEIW,YAAW,WACT,EAAN,YACQhB,KAAM,MACNc,SAAU,CAAC,CACTd,KAAM,MACNc,SAAU,CACpB,CAAY,KAAZ,QAAY,MAAZ,MACA,CAAY,KAAZ,QAAY,MAAZ,OAEA,CACUd,KAAM,OACNK,MAAO,WAGjB,OChIkV,I,YCO9UY,EAAY,eACd,EACApC,EACAkB,GACA,EACA,KACA,KACA,MAIa,aAAAkB,E","file":"public/js/chunk-2d0be166.0e330607.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"page\"},[_c('ChartTitleComponent',{attrs:{\"name\":_vm.chartname,\"desc\":_vm.chartdesc}}),_c('section',{staticClass:\"chart\"},[_c('D3Sunburst',{attrs:{\"config\":_vm.chartconfig,\"datum\":_vm.chartdata,\"title\":\"Lorem ipsum dolor sit amet\"}})],1),_c('ChartImportComponent',{attrs:{\"code\":_vm.chartname,\"link\":\"https://github.com/Saigesp/vue-d3-charts/blob/master/src/sunburst/d3.sunburst.js\"}}),_c('ChartTemplateComponent',{attrs:{\"template\":_vm.chartcode}}),_c('ChartDataComponent',{attrs:{\"desc\":_vm.chartdatadesc,\"code\":_vm.chartdatacode,\"config\":_vm.chartdataconfig}}),_c('ChartConfigComponent',{attrs:{\"options\":_vm.chartoptions}}),_c('ChartColorComponent'),_c('ChartStylesComponent',{attrs:{\"classname\":\"sunburst\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Sunburst.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Sunburst.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Sunburst.vue?vue&type=template&id=8529e372&\"\nimport script from \"./Sunburst.vue?vue&type=script&lang=js&\"\nexport * from \"./Sunburst.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} --------------------------------------------------------------------------------