cozy-ui 62.8.0 → 62.10.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [62.10.0](https://github.com/cozy/cozy-ui/compare/v62.9.1...v62.10.0) (2022-04-21)
+
+
+### Features
+
+* Add chart.js and react-chartjs-2 packages ([16df033](https://github.com/cozy/cozy-ui/commit/16df033))
+* Add PieChart component ([b7ce49f](https://github.com/cozy/cozy-ui/commit/b7ce49f))
+
+## [62.9.1](https://github.com/cozy/cozy-ui/compare/v62.9.0...v62.9.1) (2022-04-21)
+
+
+### Bug Fixes
+
+* bump convict from 6.0.0 to 6.2.2 ([403c38e](https://github.com/cozy/cozy-ui/commit/403c38e))
+
+# [62.9.0](https://github.com/cozy/cozy-ui/compare/v62.8.0...v62.9.0) (2022-04-20)
+
+
+### Features
+
+* Add makeStyles helper from Mui ([7962227](https://github.com/cozy/cozy-ui/commit/7962227))
+
 # [62.8.0](https://github.com/cozy/cozy-ui/compare/v62.7.0...v62.8.0) (2022-04-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.8.0",
+  "version": "62.10.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -113,6 +113,7 @@
     "http-server": "0.13.0",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
+    "jest-canvas-mock": "2.3.1",
     "jest-cli": "^26.6.3",
     "kss": "3.0.1",
     "kss-webpack-plugin": "1.5.0",
@@ -153,6 +154,7 @@
   "dependencies": {
     "@babel/runtime": "^7.3.4",
     "@popperjs/core": "^2.4.4",
+    "chart.js": "3.7.1",
     "classnames": "^2.2.5",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
@@ -164,6 +166,7 @@
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
     "piwik-react-router": "0.12.1",
+    "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",
     "react-pdf": "^4.0.5",
     "react-popper": "^2.2.3",
@@ -200,7 +203,8 @@
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "./test/jestsetup.js"
+      "./test/jestsetup.js",
+      "jest-canvas-mock"
     ],
     "moduleFileExtensions": [
       "js",

package/react/PieChart/Readme.md

@@ -0,0 +1,53 @@
+#### PieChart
+
+```jsx
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import PieChart from 'cozy-ui/transpiled/react/PieChart'
+
+;
+
+<Grid container>
+  <Grid item xs={12} sm={6}>
+    <PieChart
+      single={true}
+      primaryText="60 %"
+      secondaryText="of the total"
+      data={{
+        labels: ['Health'],
+        datasets: [{ data: [60, 40] }]
+      }}
+      options={{
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: tooltipItems => `${tooltipItems.label}: ${tooltipItems.raw}%`
+            }
+          }
+        }
+      }}
+    />
+  </Grid>
+  <Grid item xs={12} sm={6}>
+    <PieChart
+      primaryText="105 €"
+      secondaryText="on the period"
+      data={{
+        labels: ['Earnings', 'Children', 'Sports', 'Housing', 'Health'],
+        datasets: [{
+          data: [40, 30, 20, 10, 5],
+          backgroundColor: ['#8978FF', '#FF7B5E', '#F85AA8', '#F1B61E', '#15CACD']
+        }]
+      }}
+      options={{
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: tooltipItems => `${tooltipItems.label}: ${tooltipItems.raw}€`
+            }
+          }
+        }
+      }}
+    />
+  </Grid>
+</Grid>
+```

package/react/PieChart/index.jsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+import { useTheme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import set from 'lodash/set'
+import cloneDeep from 'lodash/cloneDeep'
+
+import Typography from '../Typography'
+import isTesting from '../helpers/isTesting'
+
+ChartJS.register(ArcElement, Tooltip)
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    position: 'relative',
+    zIndex: '1',
+    width: '192px',
+    height: '192px'
+  },
+  background: {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    border: '24px solid var(--actionColorGhost)',
+    borderRadius: '100%',
+    zIndex: -1,
+    backgroundColor: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? theme.palette.primary.main
+        : 'none',
+    boxShadow: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? `0 0 0 2px ${theme.palette.primary.main}`
+        : 'none'
+  },
+  centerText: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    top: '25px',
+    left: '25px',
+    right: '25px',
+    bottom: '25px',
+    borderRadius: '50%',
+    zIndex: '-1'
+  },
+  typography: {
+    color: ({ single }) =>
+      !single && theme.palette.type === 'dark'
+        ? theme.palette.primary.contrastText
+        : theme.palette.text.primary
+  }
+}))
+
+export const makeOptions = ({ options, single }) => {
+  const madeOptions = {
+    cutout: '75%',
+    elements: {
+      arc: {
+        borderWidth: 0
+      }
+    },
+    animation: isTesting() ? false : { duration: 1000 },
+    ...options
+  }
+  if (single) set(madeOptions, 'plugins.tooltip.filter', item => item.label)
+
+  return madeOptions
+}
+
+export const makeData = ({ data, single, theme }) => {
+  const madeData = cloneDeep(data)
+  if (single)
+    set(madeData, 'datasets[0].backgroundColor', [
+      theme.palette.primary.main,
+      'transparent'
+    ])
+
+  return madeData
+}
+
+const PieChart = ({
+  data,
+  options = {},
+  primaryText,
+  secondaryText,
+  single = false,
+  className,
+  ...props
+}) => {
+  const theme = useTheme()
+  const classes = useStyles({ single })
+  const madeOptions = makeOptions({ options, single })
+  const madeData = makeData({ data, single, theme })
+
+  return (
+    <div className={cx(classes.container, className)} {...props}>
+      <div className={classes.background} />
+      <Doughnut data={madeData} options={madeOptions} />
+      {(primaryText || secondaryText) && (
+        <div className={classes.centerText}>
+          {primaryText && (
+            <Typography classes={{ root: classes.typography }} variant="h3">
+              {primaryText}
+            </Typography>
+          )}
+          {secondaryText && (
+            <Typography classes={{ root: classes.typography }} variant="body2">
+              {secondaryText}
+            </Typography>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+PieChart.propTypes = {
+  /** Data to be passed to chart.js graph */
+  data: PropTypes.object.isRequired,
+  /** Options to be passed to chart.js graph */
+  options: PropTypes.object,
+  /** Text to show as primary */
+  primaryText: PropTypes.string,
+  /** Text to show as secondary */
+  secondaryText: PropTypes.string,
+  /** Whether to use a single data */
+  single: PropTypes.bool,
+  className: PropTypes.string
+}
+
+export default PieChart

package/react/PieChart/index.spec.jsx

@@ -0,0 +1,123 @@
+import { makeOptions, makeData } from './index'
+
+describe('makeOptions', () => {
+  it('should return default options', () => {
+    const options = makeOptions({ options: {}, single: false })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 }
+    })
+  })
+
+  it('should return default options for a single pie chart', () => {
+    const options = makeOptions({ options: {}, single: true })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: { tooltip: { filter: expect.any(Function) } }
+    })
+  })
+
+  it('should return default and customized options', () => {
+    const options = makeOptions({ options: { foo: 'bar' }, single: false })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      foo: 'bar'
+    })
+  })
+
+  it('should return default and customized options for a single pie chart', () => {
+    const options = makeOptions({ options: { foo: 'bar' }, single: true })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: { tooltip: { filter: expect.any(Function) } },
+      foo: 'bar'
+    })
+  })
+
+  it('should return default and customized options for a single pie chart even for customized default option', () => {
+    const options = makeOptions({
+      options: { plugins: { tooltip: { foo: 'bar' } } },
+      single: true
+    })
+
+    expect(options).toStrictEqual({
+      cutout: '75%',
+      elements: {
+        arc: {
+          borderWidth: 0
+        }
+      },
+      animation: { duration: 1000 },
+      plugins: {
+        tooltip: {
+          foo: 'bar',
+          filter: expect.any(Function)
+        }
+      }
+    })
+  })
+})
+
+describe('makeData', () => {
+  it('should return previous data is not a single pie chart', () => {
+    const prevData = { labels: ['Health'] }
+    const data = makeData({
+      data: prevData,
+      single: false,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(data).toStrictEqual(prevData)
+  })
+
+  it('should add backgroud color for a single pie chart', () => {
+    const data = makeData({
+      data: { labels: ['Health'] },
+      single: true,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(data).toStrictEqual({
+      labels: ['Health'],
+      datasets: [{ backgroundColor: ['#fff', 'transparent'] }]
+    })
+  })
+
+  it('should not mutate previous data for a single pie chart', () => {
+    const prevData = { labels: ['Health'] }
+    makeData({
+      data: prevData,
+      single: true,
+      theme: { palette: { primary: { main: '#fff' } } }
+    })
+
+    expect(prevData).toStrictEqual({ labels: ['Health'] })
+  })
+})

package/react/__snapshots__/examples.spec.jsx.snap

@@ -7577,13 +7577,13 @@ exports[`Media should render examples: Media 3`] = `
 exports[`MuiCozyTheme/Switch should render examples: MuiCozyTheme/Switch 1`] = `
 "<div>
   <div class=\\"styles__Stack--xs___2R5lW\\">
-    <div class=\\"MuiBox-root MuiBox-root-16\\">
+    <div class=\\"MuiBox-root MuiBox-root-24\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-displayInline\\">primary</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-checked-2 Mui-checked\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
-    <div class=\\"MuiBox-root MuiBox-root-17\\">
+    <div class=\\"MuiBox-root MuiBox-root-25\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-displayInline\\">secondary</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-2 Mui-checked\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
-    <div class=\\"MuiBox-root MuiBox-root-18\\">
+    <div class=\\"MuiBox-root MuiBox-root-26\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-displayInline\\">default</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
   </div>
@@ -7683,6 +7683,31 @@ exports[`PercentageLine should render examples: PercentageLine 1`] = `
 </div>"
 `;
 
+exports[`PieChart should render examples: PieChart 1`] = `
+"<div>
+  <div class=\\"MuiGrid-root MuiGrid-container\\">
+    <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
+      <div class=\\"makeStyles-container-14\\">
+        <div class=\\"makeStyles-background-15 makeStyles-background-18\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
+        <div class=\\"makeStyles-centerText-16\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-17 makeStyles-typography-19 MuiTypography-h3\\">60 %</h3>
+          <p class=\\"MuiTypography-root makeStyles-typography-17 makeStyles-typography-19 MuiTypography-body2\\">of the total</p>
+        </div>
+      </div>
+    </div>
+    <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
+      <div class=\\"makeStyles-container-14\\">
+        <div class=\\"makeStyles-background-15 makeStyles-background-20\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
+        <div class=\\"makeStyles-centerText-16\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-17 makeStyles-typography-21 MuiTypography-h3\\">105 €</h3>
+          <p class=\\"MuiTypography-root makeStyles-typography-17 makeStyles-typography-21 MuiTypography-body2\\">on the period</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Progress should render examples: Progress 1`] = `
 "<div>
   <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
@@ -7703,7 +7728,7 @@ exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHVALUE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">PROGRESSBAR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBUTTON</span></label>
   </div>
   <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
-    <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-14\\">
+    <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-22\\">
       <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between\\">
         <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-lg-8\\">
           <div class=\\"MuiGrid-root MuiGrid-item\\">
@@ -7722,7 +7747,7 @@ exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
     </div>
   </div>
   <hr class=\\"MuiDivider-root\\">
-  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary Component-progress-15 MuiLinearProgress-indeterminate\\" role=\\"progressbar\\">
+  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary Component-progress-23 MuiLinearProgress-indeterminate\\" role=\\"progressbar\\">
     <div class=\\"MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate\\"></div>
     <div class=\\"MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary\\"></div>
   </div>

package/react/examples.spec.jsx

@@ -60,6 +60,7 @@ testComponent('Paper')
 testComponent('PasswordExample')
 testComponent('PercentageBar')
 testComponent('PercentageLine')
+testComponent('PieChart')
 testComponent('Progress')
 testComponent('ProgressionBanner')
 testComponent('QuotaAlert')

package/react/helpers/makeStyles.js

@@ -0,0 +1,2 @@
+import { makeStyles } from '@material-ui/core/styles'
+export default makeStyles

package/react/index.js

@@ -28,6 +28,7 @@ export { default as AccordionSummary } from './MuiCozyTheme/AccordionSummary'
 export { default as AccordionDetails } from './MuiCozyTheme/AccordionDetails'
 export { default as Toggle } from './Toggle'
 export { default as withBreakpoints } from './helpers/withBreakpoints'
+export { default as makeStyles } from './helpers/makeStyles'
 export { default as useBreakpoints } from './hooks/useBreakpoints'
 export { default as useBrowserOffline } from './hooks/useBrowserOffline'
 export { Media, Img, Bd } from './Media'
@@ -102,3 +103,4 @@ export { default as Radios } from './Radios'
 export { default as BottomSheet, BottomSheetItem } from './BottomSheet'
 export { default as FilePicker } from './FilePicker'
 export { default as Chips } from './Chips'
+export { default as PieChart } from './PieChart'

package/transpiled/react/PieChart/index.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["data", "options", "primaryText", "secondaryText", "single", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+import { useTheme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+import Typography from "cozy-ui/transpiled/react/Typography";
+import isTesting from "cozy-ui/transpiled/react/helpers/isTesting";
+ChartJS.register(ArcElement, Tooltip);
+var useStyles = makeStyles(function (theme) {
+  return {
+    container: {
+      position: 'relative',
+      zIndex: '1',
+      width: '192px',
+      height: '192px'
+    },
+    background: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      border: '24px solid var(--actionColorGhost)',
+      borderRadius: '100%',
+      zIndex: -1,
+      backgroundColor: function backgroundColor(_ref) {
+        var single = _ref.single;
+        return !single && theme.palette.type === 'dark' ? theme.palette.primary.main : 'none';
+      },
+      boxShadow: function boxShadow(_ref2) {
+        var single = _ref2.single;
+        return !single && theme.palette.type === 'dark' ? "0 0 0 2px ".concat(theme.palette.primary.main) : 'none';
+      }
+    },
+    centerText: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'absolute',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      top: '25px',
+      left: '25px',
+      right: '25px',
+      bottom: '25px',
+      borderRadius: '50%',
+      zIndex: '-1'
+    },
+    typography: {
+      color: function color(_ref3) {
+        var single = _ref3.single;
+        return !single && theme.palette.type === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary;
+      }
+    }
+  };
+});
+export var makeOptions = function makeOptions(_ref4) {
+  var options = _ref4.options,
+      single = _ref4.single;
+
+  var madeOptions = _objectSpread({
+    cutout: '75%',
+    elements: {
+      arc: {
+        borderWidth: 0
+      }
+    },
+    animation: isTesting() ? false : {
+      duration: 1000
+    }
+  }, options);
+
+  if (single) set(madeOptions, 'plugins.tooltip.filter', function (item) {
+    return item.label;
+  });
+  return madeOptions;
+};
+export var makeData = function makeData(_ref5) {
+  var data = _ref5.data,
+      single = _ref5.single,
+      theme = _ref5.theme;
+  var madeData = cloneDeep(data);
+  if (single) set(madeData, 'datasets[0].backgroundColor', [theme.palette.primary.main, 'transparent']);
+  return madeData;
+};
+
+var PieChart = function PieChart(_ref6) {
+  var data = _ref6.data,
+      _ref6$options = _ref6.options,
+      options = _ref6$options === void 0 ? {} : _ref6$options,
+      primaryText = _ref6.primaryText,
+      secondaryText = _ref6.secondaryText,
+      _ref6$single = _ref6.single,
+      single = _ref6$single === void 0 ? false : _ref6$single,
+      className = _ref6.className,
+      props = _objectWithoutProperties(_ref6, _excluded);
+
+  var theme = useTheme();
+  var classes = useStyles({
+    single: single
+  });
+  var madeOptions = makeOptions({
+    options: options,
+    single: single
+  });
+  var madeData = makeData({
+    data: data,
+    single: single,
+    theme: theme
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cx(classes.container, className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: classes.background
+  }), /*#__PURE__*/React.createElement(Doughnut, {
+    data: madeData,
+    options: madeOptions
+  }), (primaryText || secondaryText) && /*#__PURE__*/React.createElement("div", {
+    className: classes.centerText
+  }, primaryText && /*#__PURE__*/React.createElement(Typography, {
+    classes: {
+      root: classes.typography
+    },
+    variant: "h3"
+  }, primaryText), secondaryText && /*#__PURE__*/React.createElement(Typography, {
+    classes: {
+      root: classes.typography
+    },
+    variant: "body2"
+  }, secondaryText)));
+};
+
+PieChart.propTypes = {
+  /** Data to be passed to chart.js graph */
+  data: PropTypes.object.isRequired,
+
+  /** Options to be passed to chart.js graph */
+  options: PropTypes.object,
+
+  /** Text to show as primary */
+  primaryText: PropTypes.string,
+
+  /** Text to show as secondary */
+  secondaryText: PropTypes.string,
+
+  /** Whether to use a single data */
+  single: PropTypes.bool,
+  className: PropTypes.string
+};
+export default PieChart;

package/transpiled/react/helpers/makeStyles.js

@@ -0,0 +1,2 @@
+import { makeStyles } from '@material-ui/core/styles';
+export default makeStyles;

package/transpiled/react/index.js

@@ -21,6 +21,7 @@ export { default as AccordionSummary } from './MuiCozyTheme/AccordionSummary';
 export { default as AccordionDetails } from './MuiCozyTheme/AccordionDetails';
 export { default as Toggle } from './Toggle';
 export { default as withBreakpoints } from './helpers/withBreakpoints';
+export { default as makeStyles } from './helpers/makeStyles';
 export { default as useBreakpoints } from './hooks/useBreakpoints';
 export { default as useBrowserOffline } from './hooks/useBrowserOffline';
 export { Media, Img, Bd } from './Media';
@@ -79,4 +80,5 @@ export { default as FileImageLoader } from './FileImageLoader';
 export { default as Radios } from './Radios';
 export { default as BottomSheet, BottomSheetItem } from './BottomSheet';
 export { default as FilePicker } from './FilePicker';
-export { default as Chips } from './Chips';
+export { default as Chips } from './Chips';
+export { default as PieChart } from './PieChart';