pimise-zchart-test
v0.0.10
Published
Zchart is a web app that helps display statistical data in a clear and simple way.
Downloads
651
Readme
Overview
Zchart is a web app that helps display statistical data in a clear and simple way.
It's a serverless, user-friendly, Chart JS and VueJS 2 based and "ready to use" solution.
You can give it any JSON data and it will display it on a simple and readable chart.
Installation
Clone the projet
$ git clone https://github.com/zenetys/zchart.git
$ cd zchart
$ npm install or $ yarn
Run the project
$ npm run serve
or
$ yarn serve
Usage
Startup
To provide it with some data, there are two ways using the raw-data prop :
- Feed it some local data
- Give it a URL for a JSON file (remote or local) and it will fetch the data using Axios
How it works
By default, and depending on the number of dimensions in the structure of your data, it will :
- Either represent it as a Pie chart with a "count" on multiple entries for single dimension data
- Or display it as a Bar chart with two axes
AutoChart
The AutoChart is the main component used by the app. It consists of an instance of ChartJS and methods that help format your data.
You can give it a lightly customisable configuration by using the config prop :
<auto-chart :raw-data="myData" :config="myConfig" />/**
* @param {Object|Array|String} rawData - The source of your data.
* @param {Object|String} config - Configuration object for the chart.
* @param {String} config.type - Force a specific type of chart between Pie and Bar.
* @param {String} config.title - Title of the chart.
*/Note : setting either raw-data or config to a String value means it's a URL and it will be fetched.
Usage via CDN
In this section you will find information related to the usage of the AutoChart component as a standalone, complete library that you can inject in any HTML file or template.
Requirements
In order to operate on its own, the AutoChart requires a few tools :
CSS
- Zchart's CSS
JavaScript
- Vue 2
- Axios (for fetching data or configs from remote URLs)
- Zchart
Zchart's plugin will auto-install as soon as Vue is detected and the component will then be readily available. Then, all you need is a small JS script in order to create a Vue instance and set your table configuration.
Example
Here's a basic snippet you can put in your HTML file or template :
<!DOCTYPE html>
<html>
<head>
<!-- CSS REQUIREMENTS -->
<!-- Zchart CSS -->
<link href="https://unpkg.com/pimise-zchart-test@latest/dist/style.css" rel="stylesheet" />
</head>
<body>
<!-- JS REQUIREMENTS -->
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- Axios, for fetching remote URLs -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<!-- Zchart -->
<script src="https://unpkg.com/pimise-zchart-test@latest/dist/zchart.umd.js"></script>
<div id="auto-chart-container">
<auto-chart v-if="isDataReady" :raw-data="ips" />
</div>
<script>
new Vue({
el: '#auto-chart-container',
data() {
return {
ips: [],
isDataReady: false,
};
},
async mounted() {
// Fetch test data from a remote server and select a single set of data to display (IP addresses)
const response = await axios.get(
'https://www.pims-tools.fr/webdev/test_data/zchart/logs-sample.json'
);
this.ips = response.data.map((item) => item.ip);
this.isDataReady = true;
},
});
</script>
<style scoped lang="scss">
body {
height: 90vh;
}
#auto-chart-container {
height: 100%;
}
</style>
</body>
</html>Build for library
npm run lib
or
yarn lib
Then you can pack the package to test it locally
npm pack
or
yarn pack
Then you can install it
npm install file:<path of the package>
or
yarn add file:<path of the package>