@lobehub/charts/es/ScatterChart/ScatterChartTooltipRow.js

React modern charts components built on recharts

var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Typography } from 'antd';
import { createStyles } from 'antd-style';
import React, { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
  var css = _ref.css,
    token = _ref.token;
  return {
    number: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-weight: 500;\n  "]))),
    title: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextSecondary)
  };
});
var ChartTooltipRow = /*#__PURE__*/memo(function (_ref2) {
  var value = _ref2.value,
    name = _ref2.name;
  var _useStyles = useStyles(),
    styles = _useStyles.styles;
  return /*#__PURE__*/_jsxs(Flexbox, {
    align: 'center',
    gap: 32,
    horizontal: true,
    justify: 'space-between',
    children: [/*#__PURE__*/_jsx(Typography.Paragraph, {
      className: styles.title,
      ellipsis: true,
      style: {
        margin: 0
      },
      children: name
    }), /*#__PURE__*/_jsx(Typography.Paragraph, {
      className: styles.number,
      style: {
        margin: 0
      },
      children: value
    })]
  });
});
export default ChartTooltipRow;