|
1 | 1 | <div align="center"> |
2 | 2 | <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128"> |
3 | 3 | <a href="https://frappe.github.io/charts"> |
4 | | - <h2>Frappe Charts</h2> |
| 4 | + <h2>Frappe Charts clone with fixes for Kotify Team</h2> |
5 | 5 | </a> |
6 | 6 | <p align="center"> |
7 | | - <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p> |
8 | 7 | <a href="https://frappe.github.io/charts"> |
9 | | - <b>Explore Demos » </b> |
10 | | - </a> |
11 | | - <a href="https://codepen.io/pratu16x7/pen/wjKBoq"> |
12 | | - <b> Edit at CodePen »</b> |
| 8 | + <b>Original project</b> |
13 | 9 | </a> |
14 | 10 | </p> |
15 | 11 | </div> |
16 | | - |
17 | | -<p align="center"> |
18 | | - <a href="https://travis-ci.org/frappe/charts"> |
19 | | - <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square"> |
20 | | - </a> |
21 | | - <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js"> |
22 | | - <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip"> |
23 | | - </a> |
24 | | -</p> |
25 | | - |
26 | | -<p align="center"> |
27 | | - <a href="https://frappe.github.io/charts"> |
28 | | - <img src=".github/example.gif"> |
29 | | - </a> |
30 | | -</p> |
31 | | - |
32 | | -### Contents |
33 | | -* [Installation](#installation) |
34 | | -* [Usage](#usage) |
35 | | -* [Contribute](https://frappe.io/charts/docs/contributing) |
36 | | -* [Updates](#updates) |
37 | | -* [License](#license) |
38 | | - |
39 | | -#### Installation |
40 | | -* Install via [`npm`](https://www.npmjs.com/get-npm): |
41 | | - |
42 | | - ```console |
43 | | - $ npm install frappe-charts |
44 | | - ``` |
45 | | - |
46 | | - and include in your project: |
47 | | - ```js |
48 | | - import { Chart } from "frappe-charts" |
49 | | - ``` |
50 | | - |
51 | | - ...or include following for es-modules(eg:vuejs): |
52 | | - ```js |
53 | | - import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js' |
54 | | - // import css |
55 | | - import 'frappe-charts/dist/frappe-charts.min.css' |
56 | | - ``` |
57 | | - |
58 | | -* ...or include within your HTML |
59 | | - |
60 | | - ```html |
61 | | - < script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.iife.js"></ script> |
62 | | - <!-- or --> |
63 | | - < script src= "https://unpkg.com/[email protected]/dist/frappe-charts.min.iife.js"></ script> |
64 | | - ``` |
65 | | - |
66 | | -#### Usage |
67 | | -```js |
68 | | -const data = { |
69 | | - labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am", |
70 | | - "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am" |
71 | | - ], |
72 | | - datasets: [ |
73 | | - { |
74 | | - name: "Some Data", type: "bar", |
75 | | - values: [25, 40, 30, 35, 8, 52, 17, -4] |
76 | | - }, |
77 | | - { |
78 | | - name: "Another Set", type: "line", |
79 | | - values: [25, 50, -10, 15, 18, 32, 27, 14] |
80 | | - } |
81 | | - ] |
82 | | -} |
83 | | - |
84 | | -const chart = new frappe.Chart("#chart", { // or a DOM element, |
85 | | - // new Chart() in case of ES6 module with above usage |
86 | | - title: "My Awesome Chart", |
87 | | - data: data, |
88 | | - type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage' |
89 | | - height: 250, |
90 | | - colors: ['#7cd6fd', '#743ee2'] |
91 | | -}) |
92 | | -``` |
93 | | - |
94 | | -...or for es-modules: |
95 | | -```js |
96 | | - |
97 | | -//replace new frappe.Chart() with new Chart() |
98 | | -const chart = new Chart("#chart", { // or a DOM element, |
99 | | - // new Chart() in case of ES6 module with above usage |
100 | | - title: "My Awesome Chart", |
101 | | - data: data, |
102 | | - type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage' |
103 | | - height: 250, |
104 | | - colors: ['#7cd6fd', '#743ee2'] |
105 | | -}) |
106 | | -``` |
107 | | - |
108 | | - |
109 | | -If you want to contribute: |
110 | | - |
111 | | -1. Clone this repo. |
112 | | -2. `cd` into project directory |
113 | | -3. `npm install` |
114 | | -4. `npm run dev` |
115 | | - |
116 | | -#### Updates |
117 | | - |
118 | | -##### v1.0.0 |
119 | | -- Major rewrite out. Some new features include: |
120 | | - - Mixed type axis datasets |
121 | | - - Stacked bar charts |
122 | | - - Value over data points |
123 | | - - Y Markers and regions |
124 | | - - Dot size, Bar space size, and other options |
125 | | - - Legend for axis charts |
126 | | -- We would be looking to incorporate existing PRs and issues in the meantime. |
127 | | - |
128 | | -##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development. |
129 | | - |
130 | | -##### v0.0.7 |
131 | | -- [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset. |
132 | | -- [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f). |
133 | | - |
134 | | -##### v0.0.5 |
135 | | -- More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs. |
136 | | -- Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D |
137 | | -- Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44). |
138 | | - |
139 | | -##### v0.0.4 |
140 | | -- Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE. |
141 | | - |
142 | | -##### v0.0.2 |
143 | | -- We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun). |
144 | | -- [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :) |
145 | | -- A new logo. |
146 | | - |
147 | | -##### v0.0.1 |
148 | | -- The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style. |
149 | | - |
150 | | -#### License |
151 | | -This repository has been released under the [MIT License](LICENSE) |
152 | | - |
153 | | ------------------- |
154 | | -Project maintained by [Frappe](https://frappe.io). |
155 | | -Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97). |
156 | | - |
0 commit comments