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

TODO