Skip to content

Commit

Permalink
🔨 fix: fix build, remove types dupes, fix optional props
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lorezz
Lorezz committed Sep 11, 2024
1 parent 81e1cce commit 8013268
Show file tree
Hide file tree
Showing 10 changed files with 472 additions and 569 deletions.
20 changes: 10 additions & 10 deletions src/components/CSVUpload.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useState, useTransition } from 'react';
import Papa from 'papaparse';
import DataTable from './DataTable';
import { useState, useTransition } from "react";
import Papa from "papaparse";
import DataTable from "./DataTable";

import { log, transposeData, moveDataColumn } from '../lib/utils';
import { MatrixType } from '../types';
import { log, transposeData, moveDataColumn } from "../lib/utils";
import { MatrixType } from "../sharedTypes";

type selectOptionType = {
value: string;
Expand All @@ -13,7 +13,7 @@ type selectOptionType = {
function cleanupValue(v: string | number) {
if (!v) return 0;
try {
const value = parseFloat('' + v);
const value = parseFloat("" + v);
return value;
} catch (error) {
return 0;
Expand Down Expand Up @@ -44,14 +44,14 @@ function UploadCSV({ setData }: { setData: Function }) {
skipEmptyLines: true,
complete: (results: any) => {
const { data } = results;
log('RESULTS DATA', data);
log("RESULTS DATA", data);
const c = getFirstOfMAtrix(data);
const category = { value: c, label: c };
log('CATEGORY', category);
log("CATEGORY", category);
const cols = getCols(data[0]);
log('COLS', cols);
log("COLS", cols);
const series = cols.filter((i) => !isSameObject(i, category));
log('SERIES', series);
log("SERIES", series);

startTransition(() => {
setRawData(data);
Expand Down
110 changes: 55 additions & 55 deletions src/components/charts/BasicChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useRef, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import { ChartPropsType, FieldDataType } from '../../types';
import { formatTooltip } from '../../lib/utils';
import { useRef, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import { ChartPropsType, FieldDataType } from "../../sharedTypes";
import { formatTooltip } from "../../lib/utils";

function BasicChart({
data,
Expand All @@ -24,32 +24,32 @@ function BasicChart({
function getOptions(data: FieldDataType) {
const config: any = data.config;
const responsive: boolean =
typeof config.responsive === 'undefined' ? true : config.responsive;
typeof config.responsive === "undefined" ? true : config.responsive;
let grid = {
left: isMobile && responsive ? 10 : config.gridLeft || '10%',
right: config.gridRight || '10%',
height: config.gridHeight || 'auto',
width: config.gridWidth || 'auto',
left: isMobile && responsive ? 10 : config.gridLeft || "10%",
right: config.gridRight || "10%",
height: config.gridHeight || "auto",
width: config.gridWidth || "auto",
bottom: config.gridBottom || 60,
top: config.gridTop || 60,
};
const zoom = config.zoom || 'none';
const zoom = config.zoom || "none";
let dataZoom: any = [];
if (zoom !== 'none') {
if (zoom !== "none") {
const x = [
{
show: true,
start: 1,
end: 100,
xAxisIndex: [0],
type: 'inside',
type: "inside",
},
{
show: true,
start: 1,
end: 100,
xAxisIndex: [0],
type: 'slider',
type: "slider",
},
];
const y = [
Expand All @@ -58,51 +58,51 @@ function BasicChart({
start: 1,
end: 100,
yAxisIndex: [0],
type: 'inside',
type: "inside",
},
{
show: true,
start: 1,
end: 100,
yAxisIndex: [0],
type: 'slider',
type: "slider",
},
];

if (zoom === 'both_axis') {
if (zoom === "both_axis") {
dataZoom = [...x, ...y];
} else if (zoom === 'x_axis') {
} else if (zoom === "x_axis") {
dataZoom = [...x];
} else if (zoom === 'y_axis') {
} else if (zoom === "y_axis") {
dataZoom = [...y];
}
}

let dataZoomOpt = ['both_axis', 'x_axis', 'y_axis'].includes(zoom)
let dataZoomOpt = ["both_axis", "x_axis", "y_axis"].includes(zoom)
? { dataZoom }
: {};

let xName = config.xLabel
? {
name: config.xLabel,
nameLocation: 'middle',
nameLocation: "middle",
nameGap: config.nameGap,
}
: {};
let yName = config.yLabel
? {
name: config.yLabel,
nameLocation: 'middle',
nameLocation: "middle",
nameGap: config.nameGap,
}
: {};

const axis =
config.direction === 'vertical'
config.direction === "vertical"
? {
xAxis: {
...xName,
type: 'category',
type: "category",
data: data.dataSource.categories,
axisTick: { show: false },
axisLabel: {
Expand All @@ -112,7 +112,7 @@ function BasicChart({
yAxis: {
...yName,
nameRotate: 90,
type: 'value',
type: "value",
axisTick: { show: false },
axisLabel: { show: responsive ? !isMobile : true },
},
Expand All @@ -121,14 +121,14 @@ function BasicChart({
yAxis: {
...xName,
nameRotate: 90,
type: 'category',
type: "category",
data: data.dataSource.categories,
axisTick: { show: false },
axisLabel: { show: responsive ? !isMobile : true },
},
xAxis: {
...yName,
type: 'value',
type: "value",
axisTick: { show: false },
axisLabel: {
hideOverlap: true,
Expand All @@ -137,15 +137,15 @@ function BasicChart({
};

const tooltip = {
trigger: config.tooltipTrigger || 'item',
trigger: config.tooltipTrigger || "item",
confine: true,
extraCssText: 'z-index:1000;max-width:90%;white-space:pre-wrap;',
extraCssText: "z-index:1000;max-width:90%;white-space:pre-wrap;",
textStyle: {
overflow: 'breakAll',
overflow: "breakAll",
width: 150,
},
axisPointer: {
type: 'shadow',
type: "shadow",
snap: true,
},
valueFormatter: (value: any) => {
Expand All @@ -155,36 +155,36 @@ function BasicChart({
};

let options = {
backgroundColor: config.background ? config.background : '#F2F7FC',
backgroundColor: config.background ? config.background : "#F2F7FC",
color: config.colors || [
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc',
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
],
...axis,
grid,
series: data.dataSource.series.map((serie: any) => {
let rest = {};
if (serie.type === 'bar' && config.stack) {
if (serie.type === "bar" && config.stack) {
let stack: any = config.stack
? config.direction === 'vertical'
? 'x'
: 'y'
? config.direction === "vertical"
? "x"
: "y"
: false;

rest = {
...rest,
stack,
itemStyle: { borderColor: 'white', borderWidth: 0.25 },
itemStyle: { borderColor: "white", borderWidth: 0.25 },
};
}
if (serie.type === 'line') {
if (serie.type === "line") {
if (config.smooth) {
let smooth: any = config.smooth ? parseFloat(config.smooth) : false;
rest = { ...rest, smooth };
Expand All @@ -194,7 +194,7 @@ function BasicChart({
rest = { ...rest, ...area };
}
if (config.showAllSymbol) {
const symbols = { showAllSymbol: true || 'auto' };
const symbols = { showAllSymbol: true || "auto" };
rest = { ...rest, ...symbols };
}
}
Expand All @@ -204,14 +204,14 @@ function BasicChart({
};
}),
textStyle: {
fontFamily: 'Titillium Web',
fontFamily: "Titillium Web",
fontSize: 14,
},
tooltip,
legend: {
type: 'scroll',
left: 'center',
top: config?.legendPosition || 'bottom',
type: "scroll",
left: "center",
top: config?.legendPosition || "bottom",
show: config.legend ?? true,
},
...dataZoomOpt,
Expand All @@ -229,15 +229,15 @@ function BasicChart({
const config: any = data.config || null;
const height = config?.h || 500;
return (
<div style={{ textAlign: 'left' }}>
<div style={{ textAlign: "left" }}>
<ReactEcharts
option={getOptions(data)}
ref={refCanvas as any}
style={{
width: '100%',
width: "100%",
height: height,
maxWidth: '100%',
marginBottom: '30px',
maxWidth: "100%",
marginBottom: "30px",
}}
/>
</div>
Expand Down
Loading

0 comments on commit 8013268

Please sign in to comment.