@brandandcelebrities/viz NPM

B&C Viz

npm i -S @brandandcelebrities/viz

Test

You can test components by navigating to folder and running npm start

Charts

Followers

Jump to Release Notes Jump to TODO

Followers

Installation

import { Followers } from '@brandandcelebrities/viz';
// or
import Followers from '@brandandcelebrities/viz/dist/js/charts/Followers';

// And include once CSS File
import '@brandandcelebrities/viz/dist/css/charts/followers.css'; // Only Followers chart's styles
// or
import '@brandandcelebrities/viz/dist/css/viz.css'; // All styles

Props

Props	Type	Default	Description
`data`	Object	required	See `data` explanations below
`lexique`	Object	required	See `lexique` explanations below
`locale`	String or Number	`"en-GB"`	Locale of the user for i18n
`formats`	Object	See below	See `formats` explanations below
`margin`	Object	`false`	See `margin` explanations below
`color`	String	`"purple"`	CSS base color for the chart
`mobile`	Boolean	`false`	Display mobile design instead of Desktop/Tablette

data

data is an Object that uses the exact following keys:

Key	Type	Default	Description
`dates`	Array	required	List of dates like `"2018-01-15"`
`community`	Array`<Number or null>`	required	List of the community count every day. If there is `null` values the chart will try to fill the gap everywhere it can.
`engagement`	Array`<?Number or null>`	required	List of the engagement every day. If there is `null` values the chart will try to fill the gap everywhere it can.
`content`	Array`<Number or null`>	required	List of the content count every day. For example the number of tweets posted every day. `null` values won't be displayed.

Example:

data: {
  dates: ['2018-01-15', '2018-01-16', '2018-01-17'],
  community: [ 26639, 26754, null],
  engagement: [ 1766.599975585938, 1515.5, null],
  content: [ 3, 1, null]
}

lexique

lexique is an Object that uses exact keys. For example in English we may have the following:

  lexique: {
    chart: {
      tooltip: {
        community: 'Community:',
        engagements: 'Average engagement:',
        publications: 'Publications:',
      },
      legends: {
        community: 'Community',
        engagements: 'Average engagement (1 month)',
        publications: 'Publications',
      },
      noData: 'There is no data available for the selected period.',
    },
  },

formats

formats is an Object that uses the following keys:

Key	Type	Default	Description
`date`	String	`"DD/MM/YYYY"`	Format for the dates

margin

margin is an Object that uses the exact following keys:

Key	Type	Default	Description
`top`	Number	`0`	Top margin value
`right`	Number	`0`	Right margin value
`bottom`	Number	`0`	Bottom margin value
`left`	Number	`0`	Left margin value

Example

<Followers
    data={data}
    color={'red'}
    lexique={lexique}
/>

Release Notes

2022-11-23 5.1.4
- Update Fix simpleNumberFormatter utils with thoushand separator
2022-11-23 5.1.3
- Update Axis: data format by props, Number: custom separator
2022-07-15 5.1.2
- Update Fix tooltip if empty data
2021-10-14 5.1.1
- Update Moved react-scripts to devDependencies, it's not used in production
2021-04-29 5.1.0
- Update Update Viz
2021-04-29 5.0.0
- Update Rollback Viz for incompatibility Influence
2021-04-29 4.0.0
- Update Add clone fonction to avoid mutable value
2021-01-31 3.0.0
- Update Update all dependencies with major version !!!(Incompatible INFLUENCE)
2019-11-07 2.1.7
- Fix Improve Y scale rounding
2019-09-20 2.1.6
- Update packages versions
2019-09-20 2.1.4
- Update Revert packages updates
2019-05-31 2.1.3
- Update packages updates
- Update Tooltip: Improve number formater with thousand separator
2019-05-31 2.1.2
- Update number formater
2019-03-22 2.1.0
- Update version to 2.x.x
2019-03-22 1.1.0
- Fix dependencies with an unpublished har-validator version
- Update react-script
2018-09-24 1.0.11
- Update design and font
2018-09-18 1.0.10
- Update design to kolsquare
2018-08-01 1.0.7
- Fix documentation typos
2018-08-01 1.0.6
- Followers documentation added