From ed87b2c155c95966cb4b2ceb462b71065b024ef3 Mon Sep 17 00:00:00 2001 From: Karandeep Singh <46585033+ConfuseIous@users.noreply.github.com> Date: Thu, 7 Sep 2023 19:35:22 +0800 Subject: [PATCH] update to work with react 18 --- docs/faq.mdx | 162 ---------- docs/hero.tsx | 44 --- docs/index.mdx | 12 - docs/props/callbacks-interface.tsx | 5 - docs/props/component-props.tsx | 5 - docs/props/options-interface.tsx | 5 - docs/props/props.mdx | 37 --- docs/props/word-interface.tsx | 5 - docs/react-wordcloud.tsx | 23 -- docs/usage/basic.mdx | 18 -- docs/usage/callbacks.mdx | 66 ---- docs/usage/optimizations.mdx | 26 -- docs/usage/options.mdx | 175 ---------- docs/usage/size.mdx | 40 --- docs/usage/transitions.mdx | 35 -- docs/words.ts | 502 ----------------------------- doczrc.js | 33 -- package.json | 20 +- types/index.d.ts | 176 +--------- 19 files changed, 10 insertions(+), 1379 deletions(-) delete mode 100644 docs/faq.mdx delete mode 100644 docs/hero.tsx delete mode 100644 docs/index.mdx delete mode 100644 docs/props/callbacks-interface.tsx delete mode 100644 docs/props/component-props.tsx delete mode 100644 docs/props/options-interface.tsx delete mode 100644 docs/props/props.mdx delete mode 100644 docs/props/word-interface.tsx delete mode 100644 docs/react-wordcloud.tsx delete mode 100644 docs/usage/basic.mdx delete mode 100644 docs/usage/callbacks.mdx delete mode 100644 docs/usage/optimizations.mdx delete mode 100644 docs/usage/options.mdx delete mode 100644 docs/usage/size.mdx delete mode 100644 docs/usage/transitions.mdx delete mode 100644 docs/words.ts delete mode 100644 doczrc.js diff --git a/docs/faq.mdx b/docs/faq.mdx deleted file mode 100644 index 10f8b81..0000000 --- a/docs/faq.mdx +++ /dev/null @@ -1,162 +0,0 @@ ---- -name: FAQ -route: /faq ---- - -import { Playground } from 'docz'; -import { useMemo, useState } from 'react'; - -import ReactWordcloud from './react-wordcloud'; -import words from './words'; - -# FAQ - -## Re-rendering issues - -Various props for `react-wordcloud` such as `size`, `callbacks`, `options` are array/object-based. A common mistake in React components is to declare these conveniently as literal prop values: - -```js -function MyWordcloud() { - return ( - - ) -} -``` - -When your component re-renders, the array/object literal props are always initialized as new instances, and this causes the underlying `react-wordcloud` component to re-render as props have changed (React behavior). To avoid this situation, either declare these prop values outside of your component, or memoize them: - -```js -const size = [400, 300]; -const options = { - fontFamily: 'courier new', - fontSizes: [10, 20], -}; - -function MyStaticWordcloud() { - return ( - - ) -} -``` - -```js -import { useMemo } from 'react'; - -function MyMemoizedWordcloud() { - const size = useMemo(() => { - return [400, 300]; - }, []); // add dependencies to useMemo where appropriate - - const options = useMemo(() => { - return { - fontFamily: 'courier new', - fontSizes: [10, 20], - } - }, []); // add dependencies to useMemo where appropriate - - return ( - - ); -} -``` - -Here is a playground that illustrates the difference between memoizing th;e `size` prop. - - - {() => { - const [iteration, setIteration] = useState(0); - const size = [600, 300]; // this creates a new array when state updates - const memoizedSize = useMemo(() => [600, 300], []); // memoized. You can also simply just define the size variable itself outside of the componenet - return ( -
- -

Will re-render because the 'size' prop is always recreated

- -

Will not re-render because the 'size' prop is memoized

- -
- ); - }} - - -## Deterministic layouts -Please refer to the [Deterministic Behavior](../usage/options#deterministic-behaviour) section for more details on controlling deterministic layouts of wordclouds. - -## Performance issues - -### Cloud-based -Performance issues in the underlying `d3-cloud` layout can be encountered in these common situations: - -- Multiple wordcloud instances. -- Large `words` data. -- High `maxWords` prop. -- Large `fontSizes` with small `size` prop (or parent container size). - -The `options.enableOptimizations` flag can be uesd to solve the first two performance problems. For the other problems, you will have to experiment and pick ideal options to configure your wordclouds. - -### Browser-based -`react-wordcloud` requires access to canvas data to render. If browsers are blocking canvas data access (e.g. Firefox's `privacy.resistFingerprinting = true` which prompts for permission to access canvas data), you need to enable it. If you are implementing projects that use `react-wordcloud`, you should inform users on how to get around the issue as shown in the example below: - -```js -function MyWordcloud(props) { - const canvasAllowed = typeof document !== 'undefined' && document.createElement('canvas').getContext('2d').getImageData(0, 0, 1, 1).data.every(v => v === 0); - - if (!canvasAllowed) { - return ( -

- React wordcloud requires access to canvas image data. Please allow - access in your browser and reload the page. -

- ); - } - - return -``` - -## Dropped Words - -This issue happens when the most _frequent_ word is also the _longest_ word. For a given wordcloud size, if the longest and most frequent word does not fit in the wordcloud SVG container, the `d3-cloud` algorithm drops them out. This is a known issue discussed in: [#36](https://github.com/jasondavies/d3-cloud/issues/36). - -`react-wordcloud` tries to solve this issue by recursively rendering the wordcloud if it detects that words have been dropped out. Each recursion would decrease the applied font-size by a scale factor. The recursion will bail out after some maximum attempts is reached, and a console warning will be thrown to the user informing that the words cannot be rendered in the wordcloud. The following example below demonstrates this scenario. - - - - - -If you see this console warning, it is recommended that you address it in the following ways: - -- Increase the wordcloud size (either using the `size` prop or the parent container). -- Reduce the `options.fontSizes` values. -- Avoid rendering long words at vertical angles (i.e. 90 degrees). Browser heights are more limited than widths, and the long words may not fit within the wordcloud height. You can control rotation angles using `rotationAngles` and `rotations` in the `options` props. - -## Typescript errors -Common typescript issues are frequently experienced when working with `Scale`, `Spiral`, `MinMaxPair` types where providing literal number arrays or strings will cause the TS compiler to complain. Most of these are type aliases (e.g. `[number, number]` and `'linear' | 'log' | 'sqrt'`) and you can resolve these issues by type-asserting them e.g. - -```ts -const fonSizes: MinMaxPair = [10, 20]; -const fontSizes = [10, 20] as MinMaxPair; - -const scale = 'linear' as const; -const scale = 'linear'; -``` diff --git a/docs/hero.tsx b/docs/hero.tsx deleted file mode 100644 index 8b29776..0000000 --- a/docs/hero.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import { choose } from '../src/utils'; -import ReactWordcloud, { MinMaxPair, Scale, Spiral } from './react-wordcloud'; -import words from './words'; - -const { random } = Math; - -const fontFamilies = ['Arial', 'Times New Roman', 'Impact']; -const fontSizes: MinMaxPair = [14, 40]; -const rotationAngles = [ - [-90, 90], - [-45, 45], - [-180, 180], -]; -const scales: Scale[] = ['linear', 'log', 'sqrt']; -const spirals: Spiral[] = ['rectangular', 'archimedean']; - -function Hero(): JSX.Element { - const [iteration, setIteration] = useState(0); - - useEffect(() => { - const interval = setInterval(() => { - setIteration(iteration + 1); - }, 3000); - return () => clearInterval(interval); - }, [iteration]); - - const options = { - fontFamily: choose(fontFamilies, random), - fontSizes, - scale: choose(scales, random), - spiral: choose(spirals, random), - rotationAngle: choose(rotationAngles, random), - }; - - return ( -
- -
- ); -} - -export default Hero; diff --git a/docs/index.mdx b/docs/index.mdx deleted file mode 100644 index b7ec932..0000000 --- a/docs/index.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Home -route: / ---- - -import Hero from './hero'; - -# `react-wordcloud` - -Simple React + D3 wordcloud component with powerful features. Uses the [`d3-cloud`](https://github.com/jasondavies/d3-cloud) layout. - - diff --git a/docs/props/callbacks-interface.tsx b/docs/props/callbacks-interface.tsx deleted file mode 100644 index c4f93fb..0000000 --- a/docs/props/callbacks-interface.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { CallbacksProp } from '../react-wordcloud'; - -export default function CallbacksInterface(_props: CallbacksProp): JSX.Element { - return null; -} diff --git a/docs/props/component-props.tsx b/docs/props/component-props.tsx deleted file mode 100644 index 6e6e790..0000000 --- a/docs/props/component-props.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Props } from '../react-wordcloud'; - -export default function ComponentProps(_props: Props): JSX.Element { - return null; -} diff --git a/docs/props/options-interface.tsx b/docs/props/options-interface.tsx deleted file mode 100644 index 9641381..0000000 --- a/docs/props/options-interface.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { OptionsProp } from '../react-wordcloud'; - -export default function OptionsInterface(_props: OptionsProp): JSX.Element { - return null; -} diff --git a/docs/props/props.mdx b/docs/props/props.mdx deleted file mode 100644 index 1c1a00a..0000000 --- a/docs/props/props.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -name: Props -route: /props ---- - -import { Props } from 'docz'; - -import CallbacksInterface from './callbacks-interface'; -import ComponentProps from './component-props'; -import OptionsInterface from './options-interface'; -import WordInterface from './word-interface'; - -# Props - -`react-wordcloud` provides a simple set of props to build and configure wordclouds. - - - -Additional props will be passed through to the underlying HTML element. - -## `Word` - -The `word` object takes the following shape - - - -## `options` - -You can customize the wordcloud by configuring the `options` prop. All fields are optional. - - - -## `callbacks` - -The `callbacks` prop provides advanced ways to control the wordcloud behaviors. All fields are optional. - - diff --git a/docs/props/word-interface.tsx b/docs/props/word-interface.tsx deleted file mode 100644 index 9d9b91f..0000000 --- a/docs/props/word-interface.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Word } from '../react-wordcloud'; - -export default function WordInterface(_props: Word): JSX.Element { - return null; -} diff --git a/docs/react-wordcloud.tsx b/docs/react-wordcloud.tsx deleted file mode 100644 index d51c1a3..0000000 --- a/docs/react-wordcloud.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import 'tippy.js/dist/tippy.css'; -import 'tippy.js/animations/scale.css'; - -import ReactWordcloudSrc, { Props } from '..'; - -export * from '..'; - -export default function ReactWordcloud(props: Props): JSX.Element { - const canvasAllowed = typeof document !== 'undefined' && document.createElement('canvas').getContext('2d').getImageData(0, 0, 1, 1).data.every(v => v === 0); - - if (!canvasAllowed) { - return ( -

- React wordcloud requires access to canvas image data. Please allow - access in your browser and reload the page. -

- ); - } - - return ; -} diff --git a/docs/usage/basic.mdx b/docs/usage/basic.mdx deleted file mode 100644 index 8203964..0000000 --- a/docs/usage/basic.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -name: Basic -menu: Usage -route: /usage/basic ---- - -import { Playground } from 'docz'; - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Basic Example - -Simply provide an array of words with valid `text` and `value` fields to begin! - - - - diff --git a/docs/usage/callbacks.mdx b/docs/usage/callbacks.mdx deleted file mode 100644 index 3acd8da..0000000 --- a/docs/usage/callbacks.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -name: Callbacks -menu: Usage -route: /usage/callbacks ---- - -import { select } from 'd3-selection'; -import { Playground } from 'docz'; - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Callbacks - -`react-wordcloud` provides a [`callbacks`](../props#callbacks) prop to configure detailed word colors, tooltips and events. - -## Colors and Tooltips - -By default, `react-wordcloud` randomnly applies colors to words using colors from the `colors` prop. It also defaults to using the `word.text` field for rendering tooltips. - -In the example below, we can pass custom `getWordColor` and `getWordTooltip` callbacks to update word colors and tooltips based on the `word` data. - - - (value > 50 ? 'blue' : 'red'), - getWordTooltip: ({ text, value }) => - `${text} (${value}) [${value > 50 ? 'good' : 'bad'}]`, - }} - /> - - -## Mouse Events - -You can pass callbacks such as `onWordClick`, `onWordMouseEnter` and `onWordMouseLeave` to capture the word and mouse events. The following example shows how we can work with the captured word and mouse events to create an enlarged word that opens an external link. - - - {() => { - const getCallback = callbackName => (word, event) => { - const isActive = callbackName !== 'onWordMouseOut'; - const element = event.target; - const text = select(element); - text - .on('click', () => { - if (isActive) { - window.open(`https://duckduckgo.com/?q=${word.text}`, '_blank'); - } - }) - .transition() - .attr('background', 'white') - .attr('font-size', isActive ? '300%' : '100%') - .attr('text-decoration', isActive ? 'underline' : 'none'); - }; - return ( - - ); - }} - diff --git a/docs/usage/optimizations.mdx b/docs/usage/optimizations.mdx deleted file mode 100644 index b40ecd3..0000000 --- a/docs/usage/optimizations.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -name: Optimizations -menu: Usage -route: /usage/optimizations ---- - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Optimizations - -> [BETA] This feature is not formally supported, but is made available for improving performance in edge cases. - -By default, `react-wordcloud` uses the [`d3.cloud`](https://github.com/jasondavies/d3-cloud) layout algorithm. The algorithm as of [v1.2.5](https://github.com/jasondavies/d3-cloud/releases/tag/v1.2.5) is not optimized to handle rendering larger `words`. - -An optimized solution was explored by [WhoAteDaCake](https://github.com/WhoAteDaCake) in [#33](https://github.com/chrisrzhou/react-wordcloud/pull/33), and can be accessed by setting `options.enableOptimizations` to `true`. This feature is currently marked as `beta` and will be more formally supported if the underlying `d3-cloud` algorithm supports it. - -The following section shows how multiple wordclouds are rendered smoothly with `enableOptimizations` set to `true`. - -
- {Array(12).fill().map((_v, i) => ( -
- -
- ))} -
diff --git a/docs/usage/options.mdx b/docs/usage/options.mdx deleted file mode 100644 index 6baebc5..0000000 --- a/docs/usage/options.mdx +++ /dev/null @@ -1,175 +0,0 @@ ---- -name: Options -menu: Usage -route: /usage/options ---- - -import { Playground } from 'docz'; - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Options - -You can customize many visual and layout properties of `react-wordcloud` by using the [`options`](../props#options) prop. - -## Colors - -`react-wordcloud` will randomnly apply colors from an array of color hex codes. - - - - - -## Deterministic Behaviour - -`react-wordcloud` randomly positions and rotates words by default. If `options.deterministic` is `true`, `react-wordcloud` will produce the same positioning/rotation/color for a provided input. You can also provide a `randomSeed` string value to control the random seed behavior. Try resizing the wordcloud up and down in the example below to see the deterministic behavior. - - - - - -## Font Styles - -Configure word font styles using the `fontFamily`, `fontSizes`, `fontStyle`, `fontWeight` options. - - - - - -## Rotations - -By default `react-wordcloud` will apply random rotations if the `rotations` option is not specified. If `rotations` option is specified, it will use evenly-divided angles from the `rotationAngles` option based on the `rotations` value. The following example demonstrates common rotation angles of wordcloud layouts - - -

Auto

- -

0º

- -

0º, 90º (negative angles work too)

- -

0º, 45º, 90º

- - - -## Layout - -Configure the wordcloud layout by using the `scale`, `spiral` options. - - - - - -## Attributes - -You can set custom attributes on the `svg` or `text` nodes by using the `svgAttributes` or `textAttributes`. You can either use a string or a function returning a string from a `Word` as values for attributes. You may also override the existing attributes that are set by the wordcloud algorithm. These features are demonstrated in the example below. - - - `Word: '${word.text}', Count: '${word.value}'`, - fill: 'red', - role: 'img', - }, - }} - words={words} - /> - - -## Interactive - -Use the Playground to edit and play around with some of these options! - - - `Word: '${word.text}', Count: '${word.value}'`, - role: 'img', - }, - tooltipOptions: { - allowHTML: true, - arrow: false, - placement: 'bottom', - }, - transitionDuration: 1000, - }} - /> - diff --git a/docs/usage/size.mdx b/docs/usage/size.mdx deleted file mode 100644 index e9378f8..0000000 --- a/docs/usage/size.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -name: Size -menu: Usage -route: /usage/size ---- - -import { Playground } from 'docz'; - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Size - -By default, `react-wordcloud` will inherit the parent's size unless an explicit `size` prop is specified. - -## Responsive parent size - -This is the default behavior. You can resize the Playground container to watch the wordcloud update when parent size changes. - - -
- -
- - -## Explicit size values - -Provide explicit values with the `size` prop. The wordcloud will no longer respond to resizing. - - - - - -## Minimum size - -You can customize the minimum size by adjusting the `minSize` prop. If the provided `size` or resized values are smaller than `minSize`, it will use the `minSize` value, as demonstrated in the following example (`minSize = [400, 400]`, `size = [100, 100]`). - - - - diff --git a/docs/usage/transitions.mdx b/docs/usage/transitions.mdx deleted file mode 100644 index 5de75d2..0000000 --- a/docs/usage/transitions.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -name: Transitions -menu: Usage -route: /usage/transitions ---- - -import { Playground } from 'docz'; -import { useState } from 'react'; - -import ReactWordcloud from '../react-wordcloud'; -import words from '../words'; - -# Transitions - -`react-wordcloud` handles updating D3 transitions when `words`, `size` and `options` prop change. The following example demonstrates this behavior. - - - {() => { - const [optionsFlag, toggleOptionsFlag] = useState(false); - const [wordsFlag, toggleWordsFlag] = useState(false); - const options = optionsFlag ? undefined : { fontFamily: 'impact' }; - const updatedWords = wordsFlag ? words : words.slice(0, 50); - return ( - <> - - - - - ); - }} - diff --git a/docs/words.ts b/docs/words.ts deleted file mode 100644 index fb2fcad..0000000 --- a/docs/words.ts +++ /dev/null @@ -1,502 +0,0 @@ -export default [ - { - text: 'told', - value: 64, - }, - { - text: 'mistake', - value: 11, - }, - { - text: 'thought', - value: 16, - }, - { - text: 'bad', - value: 17, - }, - { - text: 'correct', - value: 10, - }, - { - text: 'day', - value: 54, - }, - { - text: 'prescription', - value: 12, - }, - { - text: 'time', - value: 77, - }, - { - text: 'thing', - value: 45, - }, - { - text: 'left', - value: 19, - }, - { - text: 'pay', - value: 13, - }, - { - text: 'people', - value: 32, - }, - { - text: 'month', - value: 22, - }, - { - text: 'again', - value: 35, - }, - { - text: 'review', - value: 24, - }, - { - text: 'call', - value: 38, - }, - { - text: 'doctor', - value: 70, - }, - { - text: 'asked', - value: 26, - }, - { - text: 'finally', - value: 14, - }, - { - text: 'insurance', - value: 29, - }, - { - text: 'week', - value: 41, - }, - { - text: 'called', - value: 49, - }, - { - text: 'problem', - value: 20, - }, - { - text: 'going', - value: 59, - }, - { - text: 'help', - value: 49, - }, - { - text: 'felt', - value: 45, - }, - { - text: 'discomfort', - value: 11, - }, - { - text: 'lower', - value: 22, - }, - { - text: 'severe', - value: 12, - }, - { - text: 'free', - value: 38, - }, - { - text: 'better', - value: 54, - }, - { - text: 'muscle', - value: 14, - }, - { - text: 'neck', - value: 41, - }, - { - text: 'root', - value: 24, - }, - { - text: 'adjustment', - value: 16, - }, - { - text: 'therapy', - value: 29, - }, - { - text: 'injury', - value: 20, - }, - { - text: 'excruciating', - value: 10, - }, - { - text: 'chronic', - value: 13, - }, - { - text: 'chiropractor', - value: 35, - }, - { - text: 'treatment', - value: 59, - }, - { - text: 'tooth', - value: 32, - }, - { - text: 'chiropractic', - value: 17, - }, - { - text: 'dr', - value: 77, - }, - { - text: 'relief', - value: 19, - }, - { - text: 'shoulder', - value: 26, - }, - { - text: 'nurse', - value: 17, - }, - { - text: 'room', - value: 22, - }, - { - text: 'hour', - value: 35, - }, - { - text: 'wait', - value: 38, - }, - { - text: 'hospital', - value: 11, - }, - { - text: 'eye', - value: 13, - }, - { - text: 'test', - value: 10, - }, - { - text: 'appointment', - value: 49, - }, - { - text: 'medical', - value: 19, - }, - { - text: 'question', - value: 20, - }, - { - text: 'office', - value: 64, - }, - { - text: 'care', - value: 54, - }, - { - text: 'minute', - value: 29, - }, - { - text: 'waiting', - value: 16, - }, - { - text: 'patient', - value: 59, - }, - { - text: 'health', - value: 49, - }, - { - text: 'alternative', - value: 24, - }, - { - text: 'holistic', - value: 19, - }, - { - text: 'traditional', - value: 20, - }, - { - text: 'symptom', - value: 29, - }, - { - text: 'internal', - value: 17, - }, - { - text: 'prescribed', - value: 26, - }, - { - text: 'acupuncturist', - value: 16, - }, - { - text: 'pain', - value: 64, - }, - { - text: 'integrative', - value: 10, - }, - { - text: 'herb', - value: 13, - }, - { - text: 'sport', - value: 22, - }, - { - text: 'physician', - value: 41, - }, - { - text: 'herbal', - value: 11, - }, - { - text: 'eastern', - value: 12, - }, - { - text: 'chinese', - value: 32, - }, - { - text: 'acupuncture', - value: 45, - }, - { - text: 'prescribe', - value: 14, - }, - { - text: 'medication', - value: 38, - }, - { - text: 'western', - value: 35, - }, - { - text: 'sure', - value: 38, - }, - { - text: 'work', - value: 64, - }, - { - text: 'smile', - value: 17, - }, - { - text: 'teeth', - value: 26, - }, - { - text: 'pair', - value: 11, - }, - { - text: 'wanted', - value: 20, - }, - { - text: 'frame', - value: 13, - }, - { - text: 'lasik', - value: 10, - }, - { - text: 'amazing', - value: 41, - }, - { - text: 'fit', - value: 14, - }, - { - text: 'happy', - value: 22, - }, - { - text: 'feel', - value: 49, - }, - { - text: 'glasse', - value: 19, - }, - { - text: 'vision', - value: 12, - }, - { - text: 'pressure', - value: 16, - }, - { - text: 'find', - value: 29, - }, - { - text: 'experience', - value: 59, - }, - { - text: 'year', - value: 70, - }, - { - text: 'massage', - value: 35, - }, - { - text: 'best', - value: 54, - }, - { - text: 'mouth', - value: 20, - }, - { - text: 'staff', - value: 64, - }, - { - text: 'gum', - value: 10, - }, - { - text: 'chair', - value: 12, - }, - { - text: 'ray', - value: 22, - }, - { - text: 'dentistry', - value: 11, - }, - { - text: 'canal', - value: 13, - }, - { - text: 'procedure', - value: 32, - }, - { - text: 'filling', - value: 26, - }, - { - text: 'gentle', - value: 19, - }, - { - text: 'cavity', - value: 17, - }, - { - text: 'crown', - value: 14, - }, - { - text: 'cleaning', - value: 38, - }, - { - text: 'hygienist', - value: 24, - }, - { - text: 'dental', - value: 59, - }, - { - text: 'charge', - value: 24, - }, - { - text: 'cost', - value: 29, - }, - { - text: 'charged', - value: 13, - }, - { - text: 'spent', - value: 17, - }, - { - text: 'paying', - value: 14, - }, - { - text: 'pocket', - value: 12, - }, - { - text: 'dollar', - value: 11, - }, - { - text: 'business', - value: 32, - }, - { - text: 'refund', - value: 10, - }, -]; diff --git a/doczrc.js b/doczrc.js deleted file mode 100644 index b794b71..0000000 --- a/doczrc.js +++ /dev/null @@ -1,33 +0,0 @@ -export default { - dest: 'dist/docs', - editBranch: 'main', - menu: [ - 'Home', - 'Readme', - 'Props', - { - name: 'Usage', - menu: [ - 'Basic', - 'Size', - 'Callbacks', - 'Transitions', - 'Options', - 'Optimizations', - ], - }, - 'FAQ', - 'Changelog', - ], - public: 'public', - themeConfig: { - styles: { - root: { - fontFamily: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - }, - }, - }, - title: '☁️ React Wordcloud', - typescript: true, -}; diff --git a/package.json b/package.json index 173c0a9..596ff61 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,7 @@ ], "scripts": { "build": "microbundle --jsx React.createElement", - "build:docs": "docz build", "clean": "rm -rf dist", - "clean:docs": "rm -rf .docz", - "docs": "docz dev", "lint": "xo --fix; tsc", "prepare": "npm run clean; npm run build" }, @@ -34,10 +31,10 @@ "d3-array": "^2.5.0", "d3-cloud": "^1.2.5", "d3-dispatch": "^1.0.6", - "d3-scale": "^3.2.1", - "d3-scale-chromatic": "^1.5.0", + "d3-scale": "^4.0.2", + "d3-scale-chromatic": "^3.0.0", "d3-selection": "^1.4.2", - "d3-transition": "^1.3.2", + "d3-transition": "^3.0.1", "lodash.clonedeep": "^4.5.0", "lodash.debounce": "^4.0.8", "resize-observer-polyfill": "^1.5.1", @@ -53,18 +50,17 @@ "@types/lodash.clonedeep": "^4.5.6", "@types/lodash.debounce": "^4.0.6", "@types/seedrandom": "^2.4.28", - "docz": "^2.3.1", "eslint-config-xo-react": "^0.23.0", "eslint-config-xo-typescript": "^0.31.0", "husky": "^4.2.5", - "microbundle": "^0.12.3", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "microbundle": "^0.15.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^3.8.3", - "xo": "^0.32.1" + "xo": "^0.56.0" }, "peerDependencies": { - "react": "^16.13.0" + "react": "^18.2.0" }, "husky": { "hooks": { diff --git a/types/index.d.ts b/types/index.d.ts index 45d2bcf..19e7dc6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,174 +1,2 @@ -import { EnterElement, Selection as d3Selection } from 'd3-selection'; -import { Props as TippyProps } from 'tippy.js'; - -/** - * Types - */ -type AttributeValue = string | WordToStringCallback; - -type MinMaxPair = [number, number]; - -type Scale = 'linear' | 'log' | 'sqrt'; - -type Selection = d3Selection; - -type Enter = d3Selection; - -type Spiral = 'archimedean' | 'rectangular'; - -type WordToStringCallback = (word: Word) => void; - -type WordEventCallback = (word: Word, event?: MouseEvent) => void; - -type Optional = { - [P in keyof T]?: T[P]; -}; - -/** - * Public typings - */ -export interface Callbacks { - /** - * Set the word color using the word object. - */ - getWordColor?: WordToStringCallback; - /** - * Set the word tooltip using the word object. - */ - getWordTooltip: WordToStringCallback; - /** - * Capture the word and mouse event on click. - */ - onWordClick?: WordEventCallback; - /** - * Capture the word and mouse event on mouse-out. - */ - onWordMouseOut?: WordEventCallback; - /** - * Capture the word and mouse event on mouse over. - */ - onWordMouseOver?: WordEventCallback; -} - -export type CallbacksProp = Optional; - -export interface Options { - /** - * Allows the wordcloud to randomnly apply colors in the provided values. - */ - colors: string[]; - /** - * By default, words are randomly positioned and rotated. If true, the wordcloud will produce the same rendering output for any input. - */ - deterministic: boolean; - /** - * (BETA) This feature is not formally supported. For more details, refer to the docs. Enables optimizations for rendering larger wordclouds. Note that this uses a custom cloud layout that batches the data into smaller subsets. - */ - enableOptimizations: boolean; - /** - * Enables/disables the tooltip feature. - */ - enableTooltip: boolean; - /** - * Customize the font family. - */ - fontFamily: string; - /** - * Specify the minimum and maximum font size as a tuple. Tweak these numbers to control the best visual appearance for the wordcloud. - */ - fontSizes: MinMaxPair; - /** - * Accepts CSS values for font-styles (e.g. italic, oblique) - */ - fontStyle: string; - /** - * Accepts CSS values for font-weights (e.g. bold, 400, 700) - */ - fontWeight: string; - /** - * Controls the padding between words - */ - padding: number; - /** - * Set an optional random seed when `deterministic` option is set to `true`. - */ - randomSeed?: string; - /** - * Provide the minimum and maximum angles that words can be rotated. - */ - rotationAngles: MinMaxPair; - /** - * By default, the wordcloud will apply random rotations if this is not specified. When provided, it will use evenly-divided angles from the provided min/max rotation angles. - */ - rotations?: number; - /** - * Control how words are spaced and laid out. - */ - scale: Scale; - /** - * Control the spiral pattern on how words are laid out. - */ - spiral: Spiral; - /** - * Customizable attributes to set on the rendererd svg node - */ - svgAttributes: Record; - /** - * Customizable attributes to set on the rendererd text nodes - */ - textAttributes: Record; - /** - * Additional props object to pass to the tooltip library. For more details, - * refer to the documentation for - * [Tippy.js Props](https://atomiks.github.io/tippyjs/v6/all-props/). - */ - tooltipOptions: Optional; - /** - * Sets the animation transition time in milliseconds. - */ - transitionDuration: number; -} - -export type OptionsProp = Optional; - -export interface Props { - /** - * Callbacks to control various word properties and behaviors. - */ - callbacks?: CallbacksProp; - /** - * Maximum number of words to display. - */ - maxWords?: number; - /** - * Set minimum [width, height] values for the SVG container. - */ - minSize?: MinMaxPair; - /** - * Configure the wordcloud with various options. - */ - options?: OptionsProp; - /** - * Set explicit [width, height] values for the SVG container. This will disable responsive resizing. If undefined, the wordcloud will responsively size to its parent container. - */ - size?: MinMaxPair; - /** - * An array of word. A word is an object that must contain the 'text' and 'value' keys. - */ - words: Word[]; -} - -export interface Word { - [key: string]: any; - text: string; - value: number; -} - -/** - * Public interfaces - */ -export const defaultCallbacks: CallbacksProp; - -export const defaultOptions: OptionsProp; - -export default function ReactWordcloud(props: Props): JSX.Element; +export { default } from "./src"; +export * from "./src";