Beginner trouble getting Code Component chart to display content

Developer Support
1

Hi all,

I’m trying to set up a Recharts radar chart component (example in CodeSandbox) in a Plasmic project. (Thank you @mr_biscuit for sharing the concept!)

So far, I’ve added the radar components in my repo and then registered them in Plasmic.

/components/recharts/PolarAngleAxisWrapper.jsx 
import React from 'react';
import { PolarAngleAxis } from 'recharts';

const PolarAngleAxisWrapper = ({ dataKey }) => <PolarAngleAxis dataKey={dataKey} />;

export default PolarAngleAxisWrapper;
/components/recharts/PolarGrideWrapper.jsx 
import React from 'react';
import { PolarGrid } from 'recharts';

const PolarGridWrapper = () => <PolarGrid />;

export default PolarGridWrapper;
/components/recharts/PolarRadiusAxisWrapper.jsx 
import React from 'react';
import { PolarRadiusAxis } from 'recharts';

const PolarRadiusAxisWrapper = () => <PolarRadiusAxis />;

export default PolarRadiusAxisWrapper;
/components/recharts/RadarChartWrapper.jsx 
import React from 'react';
import { RadarChart } from 'recharts';

const RadarChartWrapper = ({ width, height, data, children }) => (
  <RadarChart width={width} height={height} data={data}>
    {children}
  </RadarChart>
);

export default RadarChartWrapper;
/components/recharts/RadarWrapper.jsx 
import React from 'react';
import { Radar } from 'recharts';

const RadarWrapper = ({ name, dataKey, stroke, fill }) => (

<Radar name={name} dataKey={dataKey} stroke={stroke} fill={fill} fillOpacity={0.6} />

);

export default RadarWrapper;
/plasmic-init.ts 
...

import PolarAngleAxisWrapper from './components/recharts/PolarAngleAxisWrapper';
import PolarGridWrapper from './components/recharts/PolarGridWrapper';
import PolarRadiusAxisWrapper from './components/recharts/PolarRadiusAxisWrapper';
import RadarChartWrapper from './components/recharts/RadarChartWrapper';
import RadarWrapper from './components/recharts/RadarWrapper';

PLASMIC.registerComponent(PolarAngleAxisWrapper, {
  name: 'PolarAngleAxis',
  props: {
    dataKey: 'string',
  },
});

PLASMIC.registerComponent(PolarGridWrapper, {
  name: 'PolarGrid',
  props: {},
});

PLASMIC.registerComponent(PolarRadiusAxisWrapper, {
  name: 'PolarRadiusAxis',
  props: {},
});

PLASMIC.registerComponent(RadarChartWrapper, {
  name: 'RadarChart',
  props: {
    width: 'number',
    height: 'number',
    data: 'object',
    children: 'slot',
  },
  defaultStyles: {
    width: '100%',
    height: '500px',
  },
});

PLASMIC.registerComponent(RadarWrapper, {
  name: 'Radar',
  props: {
    name: 'string',
    dataKey: 'string',
    stroke: 'string',
    fill: 'string',
  },
});

However, I can’t get the added component to show anything…
Is my error related to the component set up? Or am I missing something in Plasmic?

(nothing shows using the example data)

image
image1340×834 81.3 KB

My project: Plasmic

2

This has to do with how Recharts works, and not Plasmic.

If in each of the components, you do a direct assignment instead, it should work. Example:

const PolarGridWrapper = PolarGrid
3

Oh I see!

Still, with direct assignment though, I’m now getting an error

PolarAngleAxisWrapper 
import { PolarAngleAxis } from 'recharts';

const PolarAngleAxisWrapper = PolarAngleAxis;

export default PolarAngleAxisWrapper;
PolarGridWrapper 
import { PolarGrid } from 'recharts';

const PolarGridWrapper = PolarGrid;

export default PolarGridWrapper;
PolarRadiusAxisWrapper 
import { PolarRadiusAxis } from 'recharts';

const PolarRadiusAxisWrapper = PolarRadiusAxis;

export default PolarRadiusAxisWrapper;
RadarChartWrapper 
import { RadarChart } from 'recharts';

const RadarChartWrapper = RadarChart;

export default RadarChartWrapper;
RadarWrapper 
import { Radar } from 'recharts';

const RadarWrapper = Radar;

export default RadarWrapper;

image
image807×644 32 KB

No overload matches this call.
  Overload 1 of 2, '(component: ComponentType<any>, meta: CodeComponentMeta<any>): void', gave the following error.
    Argument of type 'typeof Radar' is not assignable to parameter of type 'ComponentType<any>'.
      Type 'typeof Radar' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'getDerivedStateFromProps' are incompatible.
          Type '(nextProps: Props, prevState: State) => State' is not assignable to type 'GetDerivedStateFromProps<any, any>'.
            Types of parameters 'nextProps' and 'nextProps' are incompatible.
              Type 'Readonly<any>' is not assignable to type 'Props'.
                Property 'dataKey' is missing in type 'Readonly<any>' but required in type 'RadarProps'.
  Overload 2 of 2, '(component: ComponentType<any>, name: ComponentLookupSpec): void', gave the following error.
    Argument of type 'typeof Radar' is not assignable to parameter of type 'ComponentType<any>'.

I tried just switching the others (besides RadarWrapper) to direct assignment, but Plasmic still didn’t show anything

4

For anyone stumbling upon this later,

I ended up switching from recharts to chartjs and the react-chartjs-2 package, with minimal issues so far.

radar chart component 
// components/chartjs/RadarChart.js
import React from "react";
import {
  Chart as ChartJS,
  RadarController,
  RadialLinearScale,
  PointElement,
  LineElement
} from 'chart.js';
import { Radar } from "react-chartjs-2";

// Register necessary Chart.js components
ChartJS.register(
  RadarController,
  RadialLinearScale,
  PointElement,
  LineElement
);

const ChartJsRadar = ({ radarLabels, radarDatasets, radarOptions }) => {
  const data = {
    labels: radarLabels,
    datasets: radarDatasets,
  };

  return (
      <Radar data={data} options={radarOptions} />
  );
};

export default ChartJsRadar;
component registration for plasmic 
//plasmic-init.ts
import ChartJsRadar from './components/chartjs/RadarChart';

PLASMIC.registerComponent(ChartJsRadar, {
  name: 'RadarChart',
  props: {
    radarLabels: {
      type: 'object',
      description: 'Labels for the radar chart',
    },
    radarDatasets: {
      type: 'object',
      description: 'Data for the radar chart',
    },
    radarOptions: {
      type: 'object',
      description: 'Configuration options for the radar chart',
    },
  },
});
1 Like