@brandandcelebrities/viz

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