import { Card, Title, LineChart } from "@any-charting-library";

const LineChart = ({ title, xAxis, yAxis, style, chartData }) 
	=> {
  const { loading, error, data } = chartData;
  return (
    <Card>
      <Title>{title}</Title>
      <LineChart
      	data={data}
        xAxis={xAxis}
        categories={[yAxis]}
        style={style}
      />
    </Card>
  );
};

export default LineChart;

const Dashboard = ({ securityToken }) => {
  const [variables, setVariables] = React.useState({
    'Country':'Germany',
    'Date range': { from: new Date(2024, 1, 12), to: new Date() }
  })
  return <Embeddable
    token={securityToken}
    variables={variables}
    onVariablesChange={setVariables}
    componentConfig={{ 
      theme: 'dark', timezone: 'Europe/Berlin', i18n: 'de-DE'
    }}
  />
}