Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can't use Template literals (Template strings) when custom tooltip #123

Open
hoangminhan opened this issue May 9, 2024 · 3 comments
Open

Comments

@hoangminhan
Copy link

react-native-echarts-pro【1.9.1】
react-native version【0.70.9】
react-native-webview 【13.6.0】
Platform【android and ios】

I'm using template literals with span tag. when i use template literals, chart content doesn't show

formatter:function (params) {
              let content =
                '<strong>' + params[0].name + '</strong>' + '<br />';
              let total = 0;

              params.forEach(function (item) {
                const seriesValue = item.value;
                const seriesValueTotal = item.seriesName.includes('Belink')
                  ? item.value
                  : 0;
                total += Number(seriesValueTotal);

                content +=
                  `<span style="width:6px;height:6px;color:${item.seriesIndex};display:inline-block"></span>` +
                  item.seriesName +
                  ': ' +
                  seriesValue.toLocaleString('en-US') +
                  '<br />';
              });

              // Display the total at the end of the tooltip
              content +=
                '<strong>Tổng sản lượng: </strong>' +
                total.toLocaleString('en-US');

              return content;
            }

@hoangminhan
Copy link
Author

@supervons
can you help me?

@supervons
Copy link
Owner

import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";

export default function RNEPDemo() {
  const pieOption = {
    series: [
      {
        name: "Source",
        type: "pie",
        legendHoverLink: true,
        hoverAnimation: true,
        avoidLabelOverlap: true,
        startAngle: 180,
        radius: "55%",
        center: ["50%", "35%"],
        data: [
          { value: 105.2, name: "android" },
          { value: 310, name: "iOS" },
          { value: 234, name: "web" },
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#23273C",
            },
          },
        },
      },
    ],
  };
  return (
          <View style={{ height: 300, paddingTop: 25 }}>
            <RNEChartsPro height={250} option={pieOption} />
          </View>
  );
}

@hoangminhan
Copy link
Author

This is my demo

import {Dimensions} from 'react-native';
import RNEChartsPro from 'react-native-echarts-pro';

const data = [
  {
    name: 'Belink 1 (0005)',
    isProduction: true,
    data: [
      1258, 2902, 1944, 2102, 1412, 2484, 1832, 1330, 1036, 894, 2360, 2810,
      3022, 2560, 1946, 62,
    ],
    stack: 'Belink',
    type: 'bar',
  },
  {
    name: 'Belink 2 (0018)',
    isProduction: true,
    data: [
      1328, 3022, 2044, 2138, 1476, 2574, 1892, 1388, 1070, 930, 2440, 2914,
      3036, 2646, 2034, 2424,
    ],
    stack: 'Belink',
    type: 'bar',
  },
];
const colors = ['red', 'green', 'gray'];

const ChartProduction = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      confine: 'true',
      axisPointer: {
        lineStyle: {
          color: '#767373',
        },
      },
      // position: ['30%', '20%'],
      formatter: function (params) {
        'show source';
        let content = '<strong>' + params[0].name + '</strong>' + '<br />';
        let total = 0;
        let indexColor = 0;

        params.forEach(function (item) {
          const seriesValue = item.value;
          const seriesValueTotal = item.seriesName.includes('Belink')
            ? item.value
            : 0;
          total += Number(seriesValueTotal);

          content +=
            `<span style="display:inline-block;background-color:${colors[indexColor]};height:10px;width:10px"></span>` +
            item.seriesName +
            ': ' +
            seriesValue.toLocaleString('en-US') +
            '<br />';

          indexColor += 1;
        });

        // Display the total at the end of the tooltip
        content +=
          '<strong>Total production: </strong>' + total.toLocaleString('en-US');

        return content;
      },
    },

    color: ['red', 'green'],
    legend: {
      top: 'bottom',
      type: 'scroll',
      data: ['Belink 1 (0005)', 'Belink 2 (0018)'],
      inactiveColor: '#9b9b96',
    },

    xAxis: [
      {
        type: 'category',
        data: [
          '15/04',
          '16/04',
          '17/04',
          '18/04',
          '19/04',
          '20/04',
          '21/04',
          '22/04',
          '23/04',
          '24/04',
          '25/04',
          '26/04',
          '27/04',
          '28/04',
          '29/04',
          '30/04',
        ],
      },
    ],

    yAxis: [
      {
        name: `Production (kWh)`,
        nameLocation: 'middle',
        position: 'left',
        nameGap: 50,
        nameTextStyle: {
          fontStyle: 'italic',
          fontSize: 13,
          fontWeight: 'bold',
        },
        type: 'value',
        alignTicks: true,
        min: 0,

        boundaryGap: false,

        splitLine: {
          lineStyle: {
            color: '#999',
          },
        },
        axisLabel: {
          margin: 6,
          formatter: `function (value, index) {
            'show source';
            return Intl.NumberFormat('en', {notation: 'compact'}).format(value);
          }`,
        },
      },
    ],

    series: data,
  };
  return (
    <RNEChartsPro
      webViewSettings={{
        scrollEnabled: false,
      }}
      height={250}
      width={Dimensions.get('window').width}
      option={option}
      enableParseStringFunction={true}
    />
  );
};
export default ChartProduction;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants