Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: add delta calculation#675

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
mbauchet wants to merge19 commits intotremorlabs:main
base:main
Choose a base branch
Loading
frommbauchet:feat/two-points-selection
Draft
Show file tree
Hide file tree
Changes from1 commit
Commits
Show all changes
19 commits
Select commitHold shift + click to select a range
3d9557f
add number of months
mbauchetJul 30, 2023
75a9427
add number of mnths
mbauchetJul 30, 2023
6826c21
Merge remote-tracking branch 'upstream/main'
mbauchetSep 9, 2023
d29e907
test for line chart
mbauchetSep 13, 2023
2faf271
add range selection on line & area
mbauchetSep 13, 2023
ff3feea
fix dot svg
mbauchetSep 13, 2023
a7fcef8
add to barchart and add enableDeltaCalculation prop
mbauchetSep 13, 2023
7a41a3b
fix lint
mbauchetSep 13, 2023
d9bac25
remove numberofmonth (error)
mbauchetSep 13, 2023
978ed50
Merge remote-tracking branch 'origin/main' into feat/two-points-selec…
Sep 28, 2023
963156a
fix mouse event propagation
Sep 28, 2023
e02d536
update style
Sep 29, 2023
ec9a857
fix percentage calculation
Sep 29, 2023
df03e71
add area for range selection
Sep 29, 2023
1958359
fix line click
Sep 29, 2023
12216f3
fix mouseMove
Sep 29, 2023
08c4197
fix tootip, reference area stroke color and position
Sep 29, 2023
ad96573
fix curve type delta for area
mbauchetOct 1, 2023
3de7335
add isIncreasePositive prop
mbauchetOct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
PrevPrevious commit
NextNext commit
fix lint
  • Loading branch information
@mbauchet
mbauchet committedSep 13, 2023
commit7a41a3ba84d9309f595ae23257f8a87e9958a398
12 changes: 10 additions & 2 deletionssrc/components/chart-elements/AreaChart/AreaChart.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,11 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
<ReChartsAreaChart
data={data}
onMouseDown={(e) => enableDeltaCalculation && setDeltaCalculation({ leftArea: e })}
onMouseMove={(e) => (enableDeltaCalculation && deltaCalculation.leftArea) && setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))}
onMouseMove={(e) =>
enableDeltaCalculation &&
deltaCalculation.leftArea &&
setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))
}
onMouseUp={() => setDeltaCalculation({})}
>
{showGridLines ? (
Expand DownExpand Up@@ -145,7 +149,11 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
isAnimationActive={false}
cursor={{
stroke: "#d1d5db",
strokeWidth: deltaCalculation.leftArea?.activeLabel && deltaCalculation.rightArea?.activeLabel ? 0 : 1,
strokeWidth:
deltaCalculation.leftArea?.activeLabel &&
deltaCalculation.rightArea?.activeLabel
? 0
: 1,
}}
content={({ active, payload, label }) => (
<ChartTooltip
Expand Down
18 changes: 15 additions & 3 deletionssrc/components/chart-elements/BarChart/BarChart.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -73,8 +73,17 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
data={data}
stackOffset={relative ? "expand" : "none"}
layout={layout === "vertical" ? "vertical" : "horizontal"}
onMouseDown={(e) => (enableDeltaCalculation && layout === "horizontal") && setDeltaCalculation({ leftArea: e })}
onMouseMove={(e) => (enableDeltaCalculation && layout === "horizontal" && deltaCalculation.leftArea) && setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))}
onMouseDown={(e) =>
enableDeltaCalculation &&
layout === "horizontal" &&
setDeltaCalculation({ leftArea: e })
}
onMouseMove={(e) =>
enableDeltaCalculation &&
layout === "horizontal" &&
deltaCalculation.leftArea &&
setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))
}
onMouseUp={() => setDeltaCalculation({})}
>
{showGridLines ? (
Expand DownExpand Up@@ -192,7 +201,10 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
cursor={{
fill: "#d1d5db",
opacity:
deltaCalculation.leftArea?.activeLabel && deltaCalculation.rightArea?.activeLabel ? "0" : "0.15",
deltaCalculation.leftArea?.activeLabel &&
deltaCalculation.rightArea?.activeLabel
? "0"
: "0.15",
}}
content={({ active, payload, label }) => (
<ChartTooltip
Expand Down
12 changes: 10 additions & 2 deletionssrc/components/chart-elements/LineChart/LineChart.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,11 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
<ReChartsLineChart
data={data}
onMouseDown={(e) => enableDeltaCalculation && setDeltaCalculation({ leftArea: e })}
onMouseMove={(e) => (enableDeltaCalculation && deltaCalculation.leftArea) && setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))}
onMouseMove={(e) =>
enableDeltaCalculation &&
deltaCalculation.leftArea &&
setDeltaCalculation((prev) => ({ ...prev, rightArea: e }))
}
onMouseUp={() => setDeltaCalculation({})}
>
{showGridLines ? (
Expand DownExpand Up@@ -144,7 +148,11 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
isAnimationActive={false}
cursor={{
stroke: "#d1d5db",
strokeWidth: deltaCalculation.leftArea?.activeLabel && deltaCalculation.rightArea?.activeLabel ? 0 : 1,
strokeWidth:
deltaCalculation.leftArea?.activeLabel &&
deltaCalculation.rightArea?.activeLabel
? 0
: 1,
}}
content={({ active, payload, label }) => (
<ChartTooltip
Expand Down
17 changes: 10 additions & 7 deletionssrc/components/chart-elements/common/ChartTooltip.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -97,7 +97,11 @@ const ChartTooltip = ({
}: ChartTooltipProps) => {
const hasRange = Boolean(deltaCalculation?.leftArea && deltaCalculation?.rightArea);

if (hasRange && deltaCalculation?.leftArea?.activeLabel === deltaCalculation?.rightArea?.activeLabel) return null;
if (
hasRange &&
deltaCalculation?.leftArea?.activeLabel === deltaCalculation?.rightArea?.activeLabel
)
return null;

if (active && payload) {
return (
Expand DownExpand Up@@ -133,8 +137,8 @@ const ChartTooltip = ({

<div className={tremorTwMerge(spacing.twoXl.paddingX, spacing.sm.paddingY, "space-y-1")}>
{payload.map(({ value, name }: { value: number; name: string }, idx: number) => {
const isBeforeLeftValue = deltaCalculation?.leftArea?.chartX > deltaCalculation?.rightArea?.chartX;

const isBeforeLeftValue =
deltaCalculation?.leftArea?.chartX > deltaCalculation?.rightArea?.chartX;
const displayedValue = hasRange
? (getRangePayloadValue(deltaCalculation?.rightArea?.activePayload, name) -
getRangePayloadValue(deltaCalculation?.leftArea?.activePayload, name)) *
Expand All@@ -145,12 +149,11 @@ const ChartTooltip = ({
(isBeforeLeftValue
? getRangePayloadValue(deltaCalculation?.leftArea?.activePayload, name) /
getRangePayloadValue(deltaCalculation?.rightArea?.activePayload, name)
: getRangePayloadValue(deltaCalculation?.rightArea?.activePayload, name) /
getRangePayloadValue(deltaCalculation?.leftArea?.activePayload, name)) *
100) *
:(getRangePayloadValue(deltaCalculation?.rightArea?.activePayload, name) /
getRangePayloadValue(deltaCalculation?.leftArea?.activePayload, name)) *
100)) *
-1
: 0;

const percentageValue = hasRange ? `(${percentage.toFixed(2)}%)` : "";

return (
Expand Down
4 changes: 2 additions & 2 deletionssrc/stories/chart-elements/AreaChart.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -205,5 +205,5 @@ export const WithEnableDeltaCalculation = DefaultTemplate.bind({});
WithEnableDeltaCalculation.args = {
...args,
data: data,
enableDeltaCalculation: true
};
enableDeltaCalculation: true,
};
2 changes: 1 addition & 1 deletionsrc/stories/chart-elements/BarChart.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -202,5 +202,5 @@ export const WithEnableDeltaCalculation = DefaultTemplate.bind({});
WithEnableDeltaCalculation.args = {
...args,
data: data,
enableDeltaCalculation: true
enableDeltaCalculation: true,
};
2 changes: 1 addition & 1 deletionsrc/stories/chart-elements/LineChart.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -191,5 +191,5 @@ export const WithEnableDeltaCalculation = DefaultTemplate.bind({});
WithEnableDeltaCalculation.args = {
...args,
data: data,
enableDeltaCalculation: true
enableDeltaCalculation: true,
};
[8]ページ先頭
©2009-2025 Movatter.jp