├── .editorconfig
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── chart-examples.png
    │   ├── charts-with-labels.png
    │   ├── charts-with-max-axis.png
    │   ├── charts.gif
    │   ├── long-charts.png
    │   └── trendline.png
    ├── components
    │   └── PureVueChart.vue
    ├── main.js
    └── wrapper.js
└── vue.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <h1>Pure Vue Chart</h1>
  3 | </p>
  4 | <p align="center">
  5 |     A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies
  6 | </p>
  7 | <hr/>
  8 | 
  9 | <h3>Example</h3>
 10 | 
 11 | ```
 12 | <pure-vue-chart
 13 |   :points="[3,5,2,5,4]"
 14 |   :width="400"
 15 |   :height="200"
 16 | />
 17 | ```
 18 | 
 19 | <img src="src/assets/charts.gif" alt="charts" width="350"/>
 20 | 
 21 | <p>When props are updated the graph will automatically animate to the new values.</p>
 22 | 
 23 | ## Install
 24 | ```
 25 | npm i pure-vue-chart
 26 | ```
 27 | Import it:
 28 | ```
 29 | import PureVueChart from 'pure-vue-chart';
 30 | ```
 31 | Register it in your component:
 32 | ```
 33 | components: {
 34 |     PureVueChart,
 35 | },
 36 | ```
 37 | ## Use it
 38 | ```
 39 | <pure-vue-chart
 40 |   :points="[3,5,2,5,4]"
 41 |   :width="400"
 42 |   :height="200"
 43 | />
 44 | ```
 45 | ## Options
 46 | <p>To further control the display of data, you can use simple props to manipulate the charts. Here are some examples:</p>
 47 | 
 48 | ![](src/assets/chart-examples.png)
 49 | 
 50 | #### Most of the available props below are self-explanatory:
 51 | ```
 52 | :points=[1,4,5,3,4]
 53 | :show-y-axis="false"
 54 | :show-x-axis="true"
 55 | :width="400"
 56 | :height="200"
 57 | :show-values="true"
 58 | :use-month-labels="true"
 59 | :months="['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']"
 60 | ```
 61 | 
 62 | ### Additional Features:
 63 | #### Trendline
 64 | You can add a simple linear trend line by using the following props:
 65 | ```
 66 | :show-trend-line="true"
 67 | :trend-line-width="2"
 68 | trend-line-color="lightblue"
 69 | ```
 70 | ![](src/assets/trendline.png)
 71 | 
 72 | #### X-axis labels:
 73 | X-axis labels, by default will be from 1 - length-of-data.
 74 | But you can automatically use Months by using the prop `:use-month-labels="true"`.
 75 | Or you can provide the data as an array of objects, each with a `value` and `label` like so:
 76 | ```
 77 | :points=[{label: 'N', value: 41.1}, {label: 'NW', value: 1}, {label: 'W', value: 15}]
 78 | ```
 79 | 
 80 | <h3>Contributing</h3>
 81 | I'm open to any issues or pull requests so long as
 82 | they are simple, easy to read, use the eslint settings in package.json, 
 83 | and follow commitizen-esque style commit formats. Just open an issue on github and start a discussion.
 84 | - pure-vue-chart issues - https://github.com/djaxho/pure-vue-chart/issues
 85 | 
 86 | <h3>Authors or Acknowledgments</h3>
 87 | <ul>
 88 |   <li>Danny Jackson</li>
 89 | </ul>
 90 | 
 91 | <h3> List of features </h3>
 92 | <ul>
 93 |   <li>Simple bar charts</li>
 94 |   <li>Line charts (planned)</li>
 95 |   <li>Pie charts (planned)</li>
 96 |   <li>Rose charts (planned)</li>
 97 | </ul>
 98 | 
 99 | <h3>License</h3>
100 | 
101 | This project is licensed under the MIT License but please create pull requests to improve this package together rather that copying itto another project.
102 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pure-vue-chart",
 3 |   "version": "0.4.0",
 4 |   "description": "Simple and lightweight vue chart svg component without chart library dependencies",
 5 |   "author": {
 6 |     "name": "Danny Jackson",
 7 |     "email": "djaxho@gmail.com"
 8 |   },
 9 |   "repository": "https://github.com/djaxho/pure-vue-chart",
10 |   "bugs": "https://github.com/djaxho/pure-vue-chart/issues",
11 |   "keywords": [
12 |     "vue",
13 |     "chart",
14 |     "pure"
15 |   ],
16 |   "license": "MIT",
17 |   "files": [
18 |     "dist"
19 |   ],
20 |   "main": "./dist/pure-vue-chart.common.js",
21 |   "private": false,
22 |   "scripts": {
23 |     "serve": "vue-cli-service serve",
24 |     "build": "vue-cli-service build --target lib --name pure-vue-chart src/wrapper.js",
25 |     "lint": "vue-cli-service lint"
26 |   },
27 |   "dependencies": {
28 |     "core-js": "^2.6.5",
29 |     "gsap": "^2.1.3",
30 |     "vue": "^2.6.10"
31 |   },
32 |   "devDependencies": {
33 |     "@vue/cli-plugin-babel": "^3.11.0",
34 |     "@vue/cli-plugin-eslint": "^3.11.0",
35 |     "@vue/cli-service": "^3.11.0",
36 |     "@vue/eslint-config-airbnb": "^4.0.1",
37 |     "babel-eslint": "^10.0.3",
38 |     "eslint": "^5.16.0",
39 |     "eslint-plugin-vue": "^5.2.3",
40 |     "node-sass": "^4.12.0",
41 |     "sass-loader": "^7.3.1",
42 |     "vue-template-compiler": "^2.6.10"
43 |   },
44 |   "eslintConfig": {
45 |     "root": true,
46 |     "env": {
47 |       "node": true
48 |     },
49 |     "extends": [
50 |       "plugin:vue/recommended",
51 |       "@vue/airbnb"
52 |     ],
53 |     "rules": {},
54 |     "parserOptions": {
55 |       "parser": "babel-eslint"
56 |     }
57 |   },
58 |   "postcss": {
59 |     "plugins": {
60 |       "autoprefixer": {}
61 |     }
62 |   },
63 |   "browserslist": [
64 |     "> 1%",
65 |     "last 2 versions"
66 |   ]
67 | }
68 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>pure-vue-chart</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but pure-vue-chart doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <h4>Basic: showing values</h4>
  4 |     <pure-vue-chart
  5 |       :points="dataPoints"
  6 |       :width="chartWidth"
  7 |       :height="chartHeight"
  8 |       :show-values="true"
  9 |     />
 10 |     <br>
 11 |     <br>
 12 |     <h4>Y axis</h4>
 13 |     <pure-vue-chart
 14 |       :show-y-axis="true"
 15 |       :points="dataPoints"
 16 |       :width="chartWidth"
 17 |       :height="chartHeight"
 18 |     />
 19 |     <br>
 20 |     <br>
 21 |     <h4>Max Y axis</h4>
 22 |     <pure-vue-chart
 23 |       :max-y-axis="50"
 24 |       :show-y-axis="true"
 25 |       :points="dataPoints"
 26 |       :width="chartWidth"
 27 |       :height="chartHeight"
 28 |     />
 29 |     <br>
 30 |     <br>
 31 |     <h4>X & Y axis</h4>
 32 |     <pure-vue-chart
 33 |       :max-y-axis="50"
 34 |       :show-y-axis="true"
 35 |       :show-x-axis="true"
 36 |       :points="dataPoints"
 37 |       :width="chartWidth"
 38 |       :height="chartHeight"
 39 |     />
 40 |     <br>
 41 |     <br>
 42 |     <h4>Trend line</h4>
 43 |     <pure-vue-chart
 44 |       :show-y-axis="true"
 45 |       :show-x-axis="true"
 46 |       :points="dataPoints"
 47 |       :width="chartWidth"
 48 |       :height="chartHeight"
 49 |       :use-month-labels="true"
 50 |       :show-trend-line="true"
 51 |       :trend-line-width="2"
 52 |       trend-line-color="lightblue"
 53 |     />
 54 |     <br>
 55 |     <br>
 56 |     <h4>Color</h4>
 57 |     <pure-vue-chart
 58 |       :show-y-axis="false"
 59 |       :show-x-axis="true"
 60 |       :points="dataPoints"
 61 |       :width="chartWidth"
 62 |       :height="chartHeight"
 63 |       :show-values="true"
 64 |       :use-month-labels="true"
 65 |       :animation-duration="2"
 66 |       :months="['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']"
 67 |       barColor="lightpink"
 68 |     />
 69 |     <br>
 70 |     <br>
 71 |     <h4>Custom labels and titles</h4>
 72 |     <pure-vue-chart
 73 |       :show-y-axis="false"
 74 |       :show-x-axis="true"
 75 |       :points="dataPoints"
 76 |       :width="chartWidth"
 77 |       :height="chartHeight"
 78 |       :show-values="true"
 79 |     >
 80 |       <template v-slot:label="{ barIndex, midPoint, yLabelOffset }">
 81 |         <text
 82 |           v-if="barIndex === 0"
 83 |           :x="midPoint"
 84 |           :y="`${yLabelOffset + 10}px`"
 85 |           text-anchor="middle"
 86 |         >
 87 |           &#128526;
 88 |         </text>
 89 |         <image
 90 |           v-else-if="barIndex === 1"
 91 |           :x="`${midPoint - 10}px`"
 92 |           :y="`${yLabelOffset}px`"
 93 |           height="20"
 94 |           width="20"
 95 |           href="https://raw.githubusercontent.com/vuejs/art/master/logo.png"
 96 |         />
 97 |       </template>
 98 |       <template v-slot:title="{ barIndex, staticValue }">
 99 |         <tspan>
100 |           {{ barIndex === 0 ? `Custom title: ${staticValue}` : staticValue }}
101 |         </tspan>
102 |       </template>
103 |     </pure-vue-chart>
104 |     <br>
105 |     <br>
106 |     <h4>Plotting objects</h4>
107 |     <pure-vue-chart
108 |       :show-y-axis="false"
109 |       :show-x-axis="true"
110 |       :label-height="20"
111 |       :points="dataPointObjects"
112 |       :width="chartWidth"
113 |       :height="chartHeight"
114 |       :show-values="true"
115 |     />
116 |   </div>
117 | </template>
118 | 
119 | <script>
120 | import PureVueChart from './components/PureVueChart.vue';
121 | 
122 | export default {
123 |   name: 'App',
124 |   components: {
125 |     PureVueChart,
126 |   },
127 |   data() {
128 |     return {
129 |       dataPoints: [41.1, 1, 15, 16, 23, 41.1, 4, 8, 15, 22, 1, 12],
130 |       dataPointObjects: [{label: 'N', value: 41.1}, {label: 'NW', value: 1}, {label: 'W', value: 15}, {label: 'SW', value: 16}, {label: 'S', value: 23}, {label: 'SE', value: 41.1}, {label: 'E', value: 4}, {label: 'NE', value: 8}],
131 |       chartWidth: 450,
132 |       chartHeight: 200,
133 |     };
134 |   },
135 |   created() {
136 |     document.addEventListener('click', () => { this.changeData(); }, false);
137 |   },
138 |   methods: {
139 |     changeData() {
140 |       this.dataPoints = this.dataPoints.map(() => {
141 |         return Math.floor(Math.random() * 41) + 1
142 |       });
143 |       this.dataPointObjects = this.dataPointObjects.map(({ label, value }) => {
144 |         return {
145 |           label,
146 |           value: Math.floor(Math.random() * 41) + 1,
147 |         };
148 |       });
149 |     },
150 |   },
151 | };
152 | </script>
153 | 
154 | <style>
155 | .hello {
156 |   transform: rotate(30 20,40);
157 | }
158 | #app {
159 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
160 |   -webkit-font-smoothing: antialiased;
161 |   -moz-osx-font-smoothing: grayscale;
162 |   text-align: center;
163 |   color: #2c3e50;
164 |   margin-top: 60px;
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/src/assets/chart-examples.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/chart-examples.png


--------------------------------------------------------------------------------
/src/assets/charts-with-labels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/charts-with-labels.png


--------------------------------------------------------------------------------
/src/assets/charts-with-max-axis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/charts-with-max-axis.png


--------------------------------------------------------------------------------
/src/assets/charts.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/charts.gif


--------------------------------------------------------------------------------
/src/assets/long-charts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/long-charts.png


--------------------------------------------------------------------------------
/src/assets/trendline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/djaxho/pure-vue-chart/d69becbe0b9df9f5a9359c3fc63d94d99e3a5ade/src/assets/trendline.png


--------------------------------------------------------------------------------
/src/components/PureVueChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     class="pure-vue-bar-chart"
  4 |     :width="fullSvgWidth"
  5 |     :height="fullSvgHeight"
  6 |     aria-labelledby="title"
  7 |     role="img"
  8 |   >
  9 |     <title
 10 |       v-if="title"
 11 |       id="title"
 12 |     >{{ title }}</title>
 13 |     <g :transform="`translate(0,${showYAxis ? extraTopHeightForYAxisLabel : 0})`">
 14 |       <g
 15 |         :transform="`translate(${showYAxis ? yAxisWidth : 0},0)`"
 16 |         :width="innerChartWidth"
 17 |         :height="innerChartHeight"
 18 |       >
 19 |         <g
 20 |           v-for="{ index, x, staticValue, width, height, yOffset, midPoint, yLabelOffset, label } in chartData"
 21 |           :key="index"
 22 |           :transform="`translate(${x},0)`"
 23 |         >
 24 |           <title>
 25 |             <slot
 26 |               name="title"
 27 |               :bar-index="index"
 28 |               :static-value="staticValue"
 29 |             >
 30 |               <tspan>{{ staticValue }}</tspan>
 31 |             </slot>
 32 |           </title>
 33 |           <rect
 34 |             :width="width"
 35 |             :height="height"
 36 |             :x="2"
 37 |             :y="yOffset"
 38 |             :style="{ fill: barColor }"
 39 |           />
 40 |           <text
 41 |             v-if="showValues"
 42 |             :x="midPoint"
 43 |             :y="yOffset"
 44 |             :dy="`${height < 22 ? '-5px' : '15px'}`"
 45 |             text-anchor="middle"
 46 |           >{{ staticValue }}</text>
 47 |           <g v-if="showXAxis">
 48 |             <slot
 49 |               name="label"
 50 |               :bar-index="index"
 51 |               :mid-point="midPoint"
 52 |               :y-label-offset="yLabelOffset"
 53 |             >
 54 |               <text
 55 |                 :x="midPoint"
 56 |                 :y="`${yLabelOffset + 10}px`"
 57 |                 text-anchor="middle"
 58 |               >
 59 |                 {{ label }}
 60 |               </text>
 61 |             </slot>
 62 |             <line
 63 |               :x1="midPoint"
 64 |               :x2="midPoint"
 65 |               :y1="innerChartHeight+3"
 66 |               :y2="innerChartHeight"
 67 |               stroke="#555555"
 68 |               stroke-width="1"
 69 |             />
 70 |           </g>
 71 |         </g>
 72 | 
 73 |         <line
 74 |           v-if="showTrendLine"
 75 |           :x1="trendLine.x1"
 76 |           :y1="trendLine.y1"
 77 |           :x2="trendLine.x2"
 78 |           :y2="trendLine.y2"
 79 |           :stroke-width="trendLineWidth"
 80 |           :stroke="trendLineColor"
 81 |         />
 82 |       </g>
 83 |       <g v-if="showXAxis">
 84 |         <line
 85 |           :x1="showYAxis ? yAxisWidth-1 : 2"
 86 |           :x2="innerChartWidth + yAxisWidth"
 87 |           :y1="innerChartHeight"
 88 |           :y2="innerChartHeight"
 89 |           stroke="#555555"
 90 |           stroke-width="1"
 91 |         />
 92 |       </g>
 93 |       <g v-if="showYAxis">
 94 |         <line
 95 |           :x1="yAxisWidth-1"
 96 |           :x2="yAxisWidth-1"
 97 |           :y1="innerChartHeight"
 98 |           y2="0"
 99 |           stroke="#555555"
100 |           stroke-width="1"
101 |         />
102 |         <g v-for="tick in getTicks()">
103 |           <line
104 |             :x1="tick.x1"
105 |             :y1="tick.y1"
106 |             :x2="tick.x2"
107 |             :y2="tick.y2"
108 |             stroke="#555555"
109 |             stroke-width="1"
110 |           />
111 |           <text
112 |             class="text-black"
113 |             x="0"
114 |             :y="tick.y1"
115 |             alignment-baseline="central"
116 |             fill="black"
117 |           >{{ tick.text }}</text>
118 |         </g>
119 |       </g>
120 |     </g>
121 |   </svg>
122 | </template>
123 | 
124 | <script>
125 | import { TweenLite } from 'gsap/TweenLite';
126 | 
127 | export default {
128 |   props: {
129 |     title: { type: String, default: '' },
130 |     points: { type: Array, default: () => [] },
131 |     height: { type: Number, default: 100 },
132 |     width: { type: Number, default: 300 },
133 |     showYAxis: { type: Boolean, default: false },
134 |     showXAxis: { type: Boolean, default: false },
135 |     labelHeight: { type: Number, default: 12 },
136 |     showTrendLine: { type: Boolean, default: false },
137 |     trendLineColor: { type: String, default: 'green' },
138 |     trendLineWidth: { type: Number, default: 2 },
139 |     easeIn: { type: Boolean, default: true },
140 |     showValues: { type: Boolean, default: false },
141 |     maxYAxis: { type: Number, default: 0 },
142 |     useMonthLabels: { type: Boolean, default: false },
143 |     barColor: { type: String, default: 'deepskyblue' },
144 |     animationDuration: { type: Number, default: 0.5 },
145 |   },
146 |   data() {
147 |     return {
148 |       months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
149 |       dynamicPoints: [],
150 |       staticPoints: [],
151 |       extraTopHeightForYAxisLabel: 4,
152 |       extraBottomHeightForYAxisLabel: 4,
153 |       digitsUsedInYAxis: 0,
154 |     };
155 |   },
156 |   computed: {
157 |     usingObjectsForDataPoints() {
158 |       return this.points.every(x => typeof x === 'object');
159 |     },
160 |     dataPoints() {
161 |       return this.usingObjectsForDataPoints
162 |         ? this.points.map(item => item.value)
163 |         : this.points;
164 |     },
165 |     dataLabels() {
166 |       return this.points.map((point, i) => {
167 |         if (this.useMonthLabels) {
168 |           return this.months[i];
169 |         }
170 |         return this.usingObjectsForDataPoints
171 |           ? point.label
172 |           : i + 1;
173 |       });
174 |     },
175 |     yAxisWidth() {
176 |       switch (this.digitsUsedInYAxis) {
177 |         case 4:
178 |           return 30;
179 |         case 3:
180 |           return 25;
181 |         case 2:
182 |           return 18;
183 |         default:
184 |           return 13;
185 |       }
186 |     },
187 |     xAxisHeight() {
188 |       return this.showYAxis
189 |         ? this.labelHeight
190 |         : this.labelHeight + this.extraBottomHeightForYAxisLabel + this.extraTopHeightForYAxisLabel;
191 |     },
192 |     fullSvgWidth() {
193 |       return this.width;
194 |     },
195 |     fullSvgHeight() {
196 |       return this.height;
197 |     },
198 |     innerChartWidth() {
199 |       return this.showYAxis
200 |         ? this.width - this.yAxisWidth
201 |         : this.width;
202 |     },
203 |     innerChartHeight() {
204 |       let chartHeight = this.height;
205 | 
206 |       if (this.showYAxis) {
207 |         chartHeight -= (this.extraTopHeightForYAxisLabel + this.extraBottomHeightForYAxisLabel);
208 |       }
209 |       if (this.showXAxis) {
210 |         chartHeight -= this.xAxisHeight;
211 |       }
212 |       return chartHeight;
213 |     },
214 |     partitionWidth() {
215 |       return this.innerChartWidth / this.dataPoints.length;
216 |     },
217 |     maxDomain() {
218 |       return this.maxYAxis ? this.maxYAxis : Math.ceil(Math.max(...this.dataPoints));
219 |     },
220 |     chartData() {
221 |       return this.dynamicPoints.map((dynamicValue, index) => ({
222 |         staticValue: this.staticPoints[index],
223 |         index,
224 |         label: this.dataLabels[index],
225 |         width: this.partitionWidth - 2,
226 |         midPoint: this.partitionWidth / 2,
227 |         yLabelOffset: this.innerChartHeight + 4,
228 |         x: index * this.partitionWidth,
229 |         xMidpoint: index * this.partitionWidth + this.partitionWidth / 2,
230 |         yOffset: this.innerChartHeight - this.y(dynamicValue),
231 |         height: this.y(dynamicValue),
232 |       }));
233 |     },
234 |     trendLine() {
235 |       const slopeValues = this.applySlope(this.dynamicPoints);
236 |       return {
237 |         x1: this.partitionWidth / 2,
238 |         y1: this.y(slopeValues[0])
239 |           ? this.roundTo(this.innerChartHeight - this.y(slopeValues[0]), 2)
240 |           : 0,
241 |         x2: this.innerChartWidth - this.partitionWidth / 2,
242 |         y2: this.y(slopeValues[slopeValues.length - 1])
243 |           ? this.roundTo(this.innerChartHeight - this.y(slopeValues[slopeValues.length - 1]), 2)
244 |           : 0,
245 |       };
246 |     },
247 |   },
248 |   watch: {
249 |     points() {
250 |       this.tween(this.dataPoints);
251 |     },
252 |   },
253 |   created() {
254 |     if (this.easeIn) {
255 |       this.tween(this.dataPoints);
256 |     } else {
257 |       this.dynamicPoints = this.dataPoints;
258 |       this.staticPoints = this.dataPoints;
259 |     }
260 |   },
261 |   methods: {
262 |     y(val) {
263 |       return (val / this.maxDomain) * this.innerChartHeight;
264 |     },
265 |     roundTo(n, digits = 0) {
266 |       let negative = false;
267 |       let number = n;
268 |       if (number < 0) {
269 |         negative = true;
270 |         number *= -1;
271 |       }
272 |       const multiplicator = Math.pow(10, digits);
273 |       number = parseFloat((number * multiplicator).toFixed(11));
274 |       number = (Math.round(number) / multiplicator).toFixed(2);
275 |       if (negative) {
276 |         number = (number * -1).toFixed(2);
277 |       }
278 |       return number;
279 |     },
280 |     tween(desiredDataArray) {
281 |       const desiredData = {};
282 |       const initialData = {};
283 |       for (let i = 0; i < desiredDataArray.length; i += 1) {
284 |         const key = i.toString();
285 |         desiredData[key] = desiredDataArray[i];
286 |         initialData[key] = this.dynamicPoints[i] || 0;
287 |       }
288 |       const convertBackToArray = () => {
289 |         const obj = Object.values(initialData);
290 |         obj.pop();
291 |         this.dynamicPoints = obj;
292 |       };
293 |       TweenLite.to(initialData, this.animationDuration, { ...desiredData, onUpdate: convertBackToArray });
294 |       this.staticPoints = desiredDataArray;
295 |     },
296 |     getTicks() {
297 |       for (let i = 6; i > 0; i -= 1) {
298 |         if (this.maxDomain % i === 0) {
299 |           const shouldForceDecimals = i < 3;
300 |           const numberOfTicks = shouldForceDecimals ? 3 : i;
301 |           this.digitsUsedInYAxis = this.maxDomain
302 |             .toFixed(shouldForceDecimals ? 1 : 0)
303 |             .replace('.', '')
304 |             .length;
305 |           return [...new Array(numberOfTicks + 1)].map((item, key) => {
306 |             const tickValue = this.maxDomain / numberOfTicks * (numberOfTicks - key);
307 |             const yCoord = this.innerChartHeight / numberOfTicks * key;
308 |             return {
309 |               text: shouldForceDecimals ? tickValue.toFixed(1) : tickValue,
310 |               x1: this.yAxisWidth - 4,
311 |               y1: yCoord,
312 |               x2: this.yAxisWidth - 1,
313 |               y2: yCoord,
314 |             };
315 |           });
316 |         }
317 |       }
318 |     },
319 |     applySlope(values) {
320 |       let xAvg = 0;
321 |       let yAvg = 0;
322 |       for (let x = 0; x < values.length; x++) {
323 |         xAvg += x;
324 |         yAvg += values[x];
325 |       }
326 |       xAvg /= values.length;
327 |       yAvg /= values.length;
328 |       let v1 = 0; let
329 |         v2 = 0;
330 |       for (let x = 0; x < values.length; x++) {
331 |         v1 += (x - xAvg) * (values[x] - yAvg);
332 |         v2 += Math.pow(x - xAvg, 2);
333 |       }
334 |       const a = v1 / v2;
335 |       const b = yAvg - a * xAvg;
336 |       const result = [];
337 |       for (let index = 0; index < values.length; index++) {
338 |         result.push(a * index + b);
339 |       }
340 |       return result;
341 |     },
342 |   },
343 | };
344 | </script>
345 | 
346 | <style scoped lang="scss">
347 |   .pure-vue-bar-chart text {
348 |     font: 10px sans-serif
349 |   }
350 | </style>
351 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------
/src/wrapper.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import PureVueChart from './components/PureVueChart.vue';
 3 | 
 4 | // Declare install function executed by Vue.use()
 5 | export function install(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component('pure-vue-chart', PureVueChart);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // Auto-install when vue is found (eg. in browser via <script> tag)
17 | let GlobalVue = null;
18 | if (typeof window !== 'undefined') {
19 |   GlobalVue = window.Vue;
20 | } else if (typeof global !== 'undefined') {
21 |   GlobalVue = global.Vue;
22 | }
23 | if (GlobalVue) {
24 |   GlobalVue.use(plugin);
25 | }
26 | 
27 | // To allow use as module (npm/webpack/etc.) export component
28 | export default PureVueChart;
29 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   css: { extract: false },
3 | };
4 | 


--------------------------------------------------------------------------------