import { action } from '@storybook/addon-actions' ; import { color , number , select } from '@storybook/addon-knobs' ; import React from 'react' ; import { Chart , Settings , Wordcloud , FontStyle , WordcloudSpec , Color } from '@elastic/charts' ; import { WeightFn , WordModel } from '@elastic/charts/src/chart_types/wordcloud/layout/types/viewmodel_types' ; import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils' ; import { palettes as euiPalettes } from '@elastic/charts/src/utils/themes/colors' ; import { useBaseTheme } from '../../use_base_theme' ; const text = 'Webtwo ipsum sifteo twones chegg lijit meevee spotify, joukuu wakoopa greplin. Sclipo octopart wufoo, balihoo. Kiko groupon fleck revver blyve joyent dogster, zoodles zooomr scribd dogster mog. Zinch orkut jabber trulia, sclipo. Chumby imvu rovio ning zoho akismet napster, kippt zillow mzinga zoho. ' + 'Zoho cotweet cloudera zinch spock divvyshot edmodo convore, geni palantir geni woopra divvyshot. Zoho imeem convore orkut oooj foodzie airbnb, jabber rovio klout spotify dropio. Insala octopart wikia xobni airbnb quora mzinga elgg, mog quora blekko boxbe plickers zlio. Sococo chumby trulia ebay sococo zoho lijit, spock nuvvo omgpop heekya koofers. Kazaa voki chegg napster mozy koofers, meebo heroku empressr foodzie. ' + 'zappos. Ning babblely trulia zooomr vimeo, zimbra plaxo. Zooomr blyve stypi joukuu imvu chumby voxy, ideeli omgpop elgg geni qeyno joyent, loopt reddit eskobo flickr odeo. Heekya plickers wesabe lijit kno, hojoki convore.' ; const getRandomNumber = getRandomNumberGenerator ( ) ; const palettes = { turquoise : ( d , i ) => [ '#5bc0be' , '#6fffe9' ] [ i % 2 ] , vivid : ( d , i ) => [ '#2ec4b6' , '#e71d36' , '#ff9f1c' ] [ i % 3 ] , warm : ( d , i ) => [ '#edc951' , '#eb6841' , '#cc2a36' , '#4f372d' , '#00a0b0' ] [ i % 5 ] , greenBlues : ( ) => `rgb(${ getRandomNumber ( 0 , 10 ) }, ${ getRandomNumber ( 50 , 100 ) }, ${ getRandomNumber ( 50 , 100 ) })` , redBlue : ( ) => `rgb(${ getRandomNumber ( 100 , 255 ) },${ 0 },${ getRandomNumber ( 100 , 255 ) })` , greyScale : ( ) => { const level = getRandomNumber ( 0 , 200 ) ; return `rgb(${ level },${ level },${ level })` ; } , weight : ( d ) => { const level = ( 1 - d . weight ** 15 ) * 200 ; return `rgb(${ level },${ level },${ level })` ; } , colorByWordLength : ( d ) => { const level = d . text . length ; return `rgb(${ level < 5 ? level * 60 : level < 7 ? level * 40 : level * 25 },${ level < 5 ? level * 5 : level < 7 ? level * 10 : level * 5 },${ level < 5 ? level * 25 : level < 7 ? level * 40 : level * 15 })` ; } , euiLight : ( d , i ) => { return euiPalettes . echPaletteForLightBackground . colors [ i % euiPalettes . echPaletteForLightBackground . colors . length ] ; } , euiColorBlind : ( d , i ) => { return euiPalettes . echPaletteColorBlind . colors [ i % euiPalettes . echPaletteColorBlind . colors . length ] ; } , } ; type WordcloudKnobs = Omit < WordcloudSpec , 'specType' | 'chartType' | 'data' | 'outOfRoomCallback' | 'id' > & { palette : keyof typeof palettes ; backgroundColor : Color ; } ; export const TEMPLATES = [ 'edit' , 'single' , 'rightAngled' , 'multiple' , 'squareWords' , 'smallWaves' , 'sparse' ] ; const getTemplate = ( name ) : WordcloudKnobs => { switch ( name ) { case 'single' : return { spiral : 'rectangular' , startAngle : 0 , endAngle : 0 , angleCount : 1 , padding : 1 , exponent : 4 , fontWeight : 900 , minFontSize : 14 , maxFontSize : 92 , fontFamily : 'Arial' , fontStyle : 'normal' , palette : 'greyScale' , weightFn : WeightFn . exponential , backgroundColor : '#9fa714' , } ; case 'rightAngled' : return { spiral : 'rectangular' , startAngle : 0 , endAngle : 90 , angleCount : 2 , padding : 1 , exponent : 4 , fontWeight : 600 , minFontSize : 14 , maxFontSize : 92 , fontFamily : 'Arial Narrow' , fontStyle : 'normal' , palette : 'euiLight' , weightFn : WeightFn . exponential , backgroundColor : '#ffffff' , } ; case 'multiple' : return { spiral : 'archimedean' , startAngle : - 90 , endAngle : 90 , angleCount : 16 , padding : 1 , exponent : 15 , fontWeight : 100 , minFontSize : 16 , maxFontSize : 50 , fontFamily : 'Luminari' , fontStyle : 'italic' , palette : 'redBlue' , weightFn : WeightFn . exponential , backgroundColor : '#1c1c24' , } ; case 'squareWords' : return { spiral : 'archimedean' , startAngle : - 45 , endAngle : 45 , angleCount : 2 , padding : 0 , exponent : 3 , fontWeight : 100 , minFontSize : 10 , maxFontSize : 90 , fontFamily : 'Arial Narrow' , fontStyle : 'normal' , palette : 'weight' , weightFn : WeightFn . exponential , backgroundColor : '#4a6960' , } ; case 'smallWaves' : return { spiral : 'rectangular' , startAngle : - 15 , endAngle : 15 , angleCount : 7 , padding : 0.5 , exponent : 5 , fontWeight : 600 , minFontSize : 17 , maxFontSize : 79 , fontFamily : 'Impact' , fontStyle : 'normal' , palette : 'euiColorBlind' , weightFn : WeightFn . exponential , backgroundColor : '#ffffff' , } ; case 'sparse' : return { spiral : 'rectangular' , startAngle : 0 , endAngle : 0 , angleCount : 1 , padding : getRandomNumber ( 2 , 22 ) , exponent : 15 , fontWeight : 600 , minFontSize : 12 , maxFontSize : 60 , fontFamily : 'Courier' , fontStyle : 'normal' , palette : 'vivid' , weightFn : WeightFn . exponential , backgroundColor : '#1c1c24' , } ; case 'edit' : default : return { spiral : select ( 'shape' , { oval : 'archimedean' , rectangular : 'rectangular' } , 'archimedean' ) , startAngle : number ( 'startAngle' , - 90 , { range : true , min : - 360 , max : 360 , step : 1 } ) , endAngle : number ( 'endAngle' , 90 , { range : true , min : - 360 , max : 360 , step : 1 } ) , angleCount : number ( 'angleCount' , 16 , { range : true , min : 2 , max : 360 , step : 1 } ) , padding : number ( 'padding' , 0.5 , { range : true , min : 0 , max : 10 , step : 0.5 } ) , exponent : number ( 'exponent' , 15 , { range : true , min : 0 , max : 15 , step : 1 } ) , fontWeight : number ( 'fontWeight' , 900 , { range : true , min : 100 , max : 900 , step : 100 } ) , minFontSize : number ( 'minFontSize' , 15 , { range : true , min : 6 , max : 85 , step : 1 } ) , maxFontSize : number ( 'maxFontSize' , 80 , { range : true , min : 15 , max : 150 , step : 1 } ) , fontFamily : select ( 'fontFamily' , { Arial : 'Arial' , 'Arial Narrow' : 'Arial Narrow' , Courier : 'Courier' , Impact : 'Impact' , Luminari : 'Luminari' , } , 'Arial' ) , fontStyle : select < FontStyle > ( 'fontStyle' , { normal : 'normal' , italic : 'italic' } , 'italic' ) , palette : select ( 'palette' , Object . keys ( palettes ) . reduce ( ( p , k ) => ( { ... p , [ k ] : k } ) , { } ) , 'turquoise' ) , weightFn : select ( 'weightFn' , { linear : WeightFn . linear , exponential : WeightFn . exponential , squareRoot : WeightFn . squareRoot , log : WeightFn . log , } , WeightFn . exponential ) , backgroundColor : color ( 'background' , '#1c1c24' ) , } ; } } ; const rawData = text . replace ( /[,.]/g , '' ) . toLowerCase ( ) . split ( ' ' ) . filter ( ( d , index , a ) => a . indexOf ( d ) === index ) . map ( function wordMapper ( d ) { return { text : d , weight : getRandomNumber ( 0 , 1 , 20 ) , } ; } ) ; interface RawDatum { text : string ; weight : number ; } function sampleData ( paletteName ) { return rawData . map ( function rawMapper ( d , i ) { return { ... d , color : palettes [ paletteName ] ( d , i ) , } ; } ) ; } export const Example = ( ) => { const configName = select ( 'template' , TEMPLATES . reduce ( ( p , k ) => ( { ... p , [ k ] : k } ) , { } ) , 'edit' ) ; const { backgroundColor , palette , ... knobs } = getTemplate ( configName ) ; return ( < Chart > < Settings theme = { { background : { color : backgroundColor } } } baseTheme = { useBaseTheme ( ) } onElementClick = { ( d ) => { const datum = d [ 0 ] [ 0 ] as WordModel ; action ( 'onElementClick' ) ( `${ datum . text }: ${ datum . weight }` ) ; } } onElementOver = { ( d ) => { const datum = d [ 0 ] [ 0 ] as WordModel ; action ( 'onElementOver' ) ( `${ datum . text }: ${ datum . weight }` ) ; } } /> < Wordcloud id = "spec_1" { ... knobs } data = { sampleData ( palette ) } outOfRoomCallback = { ( wordCount , renderedWordCount , renderedWords ) => { action ( 'outOfRoomCallback' ) ( `Managed to render ${ renderedWordCount } words out of ${ wordCount } words: ${ renderedWords . join ( ', ' ) }` ) ; } } /> < /Chart>); } ; Example . parameters = { background : { disable : true } , theme : { disable : true } , } ;