HoneyCharts

Info

Installation

yarn add honey-charts

Usage

import React from 'react'
import { BarChart, StackedChart, WordCloud } from 'honey-charts'

const Charts = ({
  barConfig, barData, stackConfig, stackData, wordConfig, wordData
}) => (
  <div>
    <BarChart
      config={barConfig}
      data={barData}
      containerHeight={490}
      total={3000}
    />

    <StackedChart
      config={stackConfig}
      data={stackData}
      containerHeight={490}
    />

    <WordCloud
      config={wordConfig}
      data={wordData}
      containerHeight={490}
    />
  </div>
)

export default Charts

Configuration options

{
  orientation: 'horizontal', // Options: 'horizontal' : 'vertical', default: 'horizontal
  statistic: 'percentage',   // Options: 'count' : 'percentage', default: 'counts'
  always_ymax: true,         // Options: true : false, default: false
  title: {
    label: 'What\'s your favourite Gaming Platform?',
  },
  label: {
    width: 200
  },
  margin: {
    top: 30,
    right: 30,
    bottom: 160,
    left: 40,
  },
  renderGrid: {
    x: false,
    y: true,
  },
  colors: [
    '#FDC612',
    '#F36B6B',
  ]
}

Development

Demo

yarn demo

open http://localhost:3001

Developing using production bundled files

First, bundle production files:

$ yarn build

The lib folder will be generated with the output js and css files.

Then to run demo with the bundled production files go to config/webpack.demo.js and uncomment the following lines:

  // Uncomment this to test the production build
  // config.resolve.alias['honey-charts'] = path.join(paths.root, 'lib/main.js')
  // config.resolve.alias['honey-charts-style'] = path.join(paths.root, 'lib/main.css')

Then go to demo/styles.scss and uncomment the following lines:

// Uncomment this to test production build
//@import 'honey-charts-style';

After that you can run $ yarn demo and that's it.

Developing using built bundled files as package

On package.json file add the following package:

"honey-charts": "./"

Then install the package:

$ yarn install

Note: After finished the usage, uninstall it to not be added to yarn.lock file.

Then go to config/webpack.demo.js and comment the following lines:

  // Comment this to test package build
  // This set which imports webpack will use from on the code.
  // config.resolve.alias['honey-charts'] = path.join(paths.root, 'src')

Then go to demo/styles.scss and uncomment the following line:

// Uncomment this to install as package
//@import "honey-charts/lib/main.css";

This will make the imports to use the package.json source one.

Then execute demo:

$ yarn demo

This will consume as npm package.

Workflow

Install all the dependencies

yarn

Run tests in watch mode

yarn test:watch

Run flow in watch mode

yarn flow:watch

Build and publish

How to publish a NPM version to be used for QA (staging)

Honey-charts

New releases are built and deployed automatically, simply increment the version in package.json and push your change to a branch.

PR builds are tagged with -dev.

Dashlord-sprinkles

Install/Upgrade honey-chart version on sprinkles:

yarn add [email protected]

Or manually on package.json:

{
  "dependencies": {
    "honey-charts": "0.6.45-dev"
  }
}

Then install it:

yarn

To avoid versions conflict always use exact version 0.6.45-dev instead of ^0.6.45-dev

How to release a new version (production)

Once it was reviewed and approved your code is good to go to production.

New releases are built and deployed automatically, simply increment the version in package.json and push your change to a branch.

Provided the branch passes code review after merging into master a new build with be created and pushed to npmjs.com with thee version you specified in package.json.

Dashlord-sprinkles

Install/Upgrade honey-chart version on sprinkles:

yarn add [email protected]

Or manually on package.json:

{
  "dependencies": {
    "honey-charts": "0.6.45"
  }
}

And then

yarn

BEFORE BUILD:

DO NOT FORGET TO UPDATE YOUR BRANCH WITH MASTER BRANCH

AFTER BUILD:

DO NOT FORGET TO MERGE YOUR BRANCH INTO MASTER