dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-11 12:25:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: switch charts to use useChartSize

Browse Source
This commit is contained in:
TzeYiing authored and Ziinc committed 2023-03-01 19:37:06 +08:00
1 parent c8236a89ff
commit 00cabb2d5c
2 files changed
+8 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/ui/Charts/AreaChart.tsx
+4 -10
View File
@@ -13,7 +13,7 @@ import ChartHeader from './ChartHeader'
import { Datum, CommonChartProps } from './Charts.types'
import utc from 'dayjs/plugin/utc'
import ChartNoData from './NoDataPlaceholder'
import { numberFormatter } from './Charts.utils'
import { numberFormatter, useChartSize } from './Charts.utils'
dayjs.extend(utc)
export interface AreaChartProps<D = Datum> extends CommonChartProps<D> {
@@ -38,15 +38,9 @@ const AreaChart: React.FC<AreaChartProps> = ({
className = '',
size = 'normal',
}) => {
const { Container } = useChartSize(size)
const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
// For future reference: https://github.com/supabase/supabase/pull/5311#discussion_r800852828
const chartHeight = {
tiny: 76,
small: 96,
normal: 160,
}[size as string] as number
if (data.length === 0) return <ChartNoData className={className} />
const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
@@ -74,7 +68,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
highlightedLabel={resolvedHighlightedLabel}
minimalHeader={minimalHeader}
/>
<ResponsiveContainer width="100%" height={chartHeight}>
<Container>
<RechartAreaChart
data={data}
margin={{
@@ -117,7 +111,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
fill="url(#colorUv)"
/>
</RechartAreaChart>
</ResponsiveContainer>
</Container>
{data && (
<div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
<span>{dayjs(data[0][xAxisKey]).format(customDateFormat)}</span>
studio/components/ui/Charts/BarChart.tsx
+4 -10
View File
@@ -15,7 +15,7 @@ import ChartHeader from './ChartHeader'
import { Datum, CommonChartProps } from './Charts.types'
import utc from 'dayjs/plugin/utc'
import ChartNoData from './NoDataPlaceholder'
import { numberFormatter } from './Charts.utils'
import { numberFormatter, useChartSize } from './Charts.utils'
dayjs.extend(utc)
export interface BarChartProps<D = Datum> extends CommonChartProps<D> {
@@ -42,15 +42,9 @@ const BarChart: React.FC<BarChartProps> = ({
size = 'normal',
onDatumClick,
}) => {
const { Container } = useChartSize(size)
const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
// For future reference: https://github.com/supabase/supabase/pull/5311#discussion_r800852828
const chartHeight = {
tiny: 76,
small: 96,
normal: 160,
}[size as string] as number
if (data.length === 0) return <ChartNoData className={className} />
const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
@@ -78,7 +72,7 @@ const BarChart: React.FC<BarChartProps> = ({
highlightedLabel={resolvedHighlightedLabel}
minimalHeader={minimalHeader}
/>
<ResponsiveContainer width="100%" height={chartHeight}>
<Container>
<RechartBarChart
data={data}
margin={{
@@ -138,7 +132,7 @@ const BarChart: React.FC<BarChartProps> = ({
fill="url(#colorUv)"
/>
</RechartBarChart>
</ResponsiveContainer>
</Container>
{data && (
<div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
<span>{dayjs(data[0][xAxisKey]).format(customDateFormat)}</span>