@carbon/ibm-products/lib/components/Checklist/ChecklistChart.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index$1 = require('../../_virtual/index.js');
var cx = require('classnames');
var index = require('../../node_modules/@carbon/colors/es/index.js');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
var Checklist_types = require('./Checklist.types.js');
var clamp = require('../../global/js/utils/clamp.js');

const blockClass = `${settings.pkg.prefix}--checklist__chart`;
const componentName = 'ChecklistChart';
const defaults = {
  theme: Checklist_types.Themes.light
};

/**
 * Custom chart component used within Checklist PLG component
 */
let ChecklistChart = /*#__PURE__*/React.forwardRef(
/**
 * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
 */
(_ref, ref) => {
  let {
    className,
    value,
    theme = defaults.theme,
    ...rest
  } = _ref;
  const numDegrees = clamp.clamp(value * 360, 0, 360);
  const circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
  const progressColor = index.purple50;
  React.useEffect(() => {
    const ele = document.getElementsByClassName(`${blockClass}`);
    setTimeout(() => {
      for (const el of ele) {
        if (el instanceof HTMLElement) {
          el.style.setProperty('background-image', `conic-gradient(${progressColor} ${numDegrees}deg, ${circleColor} ${numDegrees}deg 360deg)`);
          el.style.setProperty('border-radius', '50%');
        }
      }
    }, 0);
  });
  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    className: cx(blockClass, className),
    ref: ref,
    role: "img"
  }, devtools.getDevtoolsProps(componentName)));
});
ChecklistChart.displayName = componentName;

// The types and DocGen commentary for the component props,
// in alphabetical order (for consistency).
// See https://www.npmjs.com/package/prop-types#usage.
ChecklistChart.propTypes = {
  /**
   * Optional class name for this component.
   */
  className: index$1.default.string,
  /**
   * Determines the theme of the component.
   */
  theme: index$1.default.oneOf([Checklist_types.Themes.light, Checklist_types.Themes.dark]),
  /**
   * Number between 0 and 1.
   */
  value: index$1.default.number.isRequired
};

exports.ChecklistChart = ChecklistChart;