-
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
108 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 49 additions & 50 deletions
99
...src/app/[lang]/[region]/(website)/survey/responses/barchart-survey-response-component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,61 @@ | ||
| 'use client'; | ||
| import { Component } from 'react'; | ||
| import { Bar, BarChart, LabelList, ResponsiveContainer, XAxis, YAxis } from 'recharts'; | ||
| import './opacity.css'; | ||
|
|
||
| export interface ChartData { | ||
| name: string; | ||
| value: number; | ||
| } | ||
|
|
||
| export default class BarchartSurveyResponseComponent extends Component<{ data: ChartData[] }> { | ||
| render() { | ||
| const { data } = this.props; | ||
| const barHeight = 30; | ||
| const chartHeight = data.length * barHeight + 40; | ||
|
|
||
| let fillColor = 'hsl(var(--foreground))'; | ||
| function BarchartSurveyResponseComponent({ data }: { data: ChartData[] }) { | ||
| const barHeight = 30; | ||
| const chartHeight = data.length * barHeight + 40; | ||
|
|
||
| const customLabel = (props: any) => { | ||
| const { x, y, width, value } = props; | ||
| return ( | ||
| <text | ||
| aria-label={value} | ||
| x={x + width + 10} | ||
| y={y + barHeight / 2 + 3} | ||
| fontSize={15} | ||
| fill={fillColor} | ||
| textAnchor="start" | ||
| > | ||
| <title>{value}</title> | ||
| {value} | ||
| </text> | ||
| ); | ||
| }; | ||
| let fillColor = 'hsl(var(--foreground))'; | ||
|
|
||
| const customLabel = (props: any) => { | ||
| const { x, y, width, value } = props; | ||
| return ( | ||
| <ResponsiveContainer className={'survey-chart'} height={chartHeight}> | ||
| <BarChart | ||
| data={data} | ||
| layout="vertical" | ||
| margin={{ top: 20, right: 100, bottom: 20, left: 20 }} | ||
| barGap={0} | ||
| barCategoryGap="0%" | ||
| > | ||
| <Bar barSize={barHeight} dataKey="value" fill={fillColor}> | ||
| <LabelList dataKey="name" position="right" content={customLabel} /> | ||
| </Bar> | ||
| <XAxis type="number" hide /> | ||
| <YAxis | ||
| type="category" | ||
| dataKey="value" | ||
| axisLine={false} | ||
| tickLine={false} | ||
| className={'font-bold'} | ||
| tick={{ fill: fillColor }} | ||
| tickFormatter={(value) => `${value}%`} | ||
| minTickGap={1} | ||
| /> | ||
| </BarChart> | ||
| </ResponsiveContainer> | ||
| <text | ||
| aria-label={value} | ||
| x={x + width + 10} | ||
| y={y + barHeight / 2 + 3} | ||
| fontSize={15} | ||
| fill={fillColor} | ||
| textAnchor="start" | ||
| > | ||
| <title>{value}</title> | ||
| {value} | ||
| </text> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <ResponsiveContainer height={chartHeight}> | ||
| <BarChart | ||
| data={data} | ||
| className="before:to-background before:absolute before:inset-y-0 before:right-0 before:w-10 before:bg-gradient-to-r before:from-transparent before:content-['']" | ||
| layout="vertical" | ||
| margin={{ top: 20, right: 100, bottom: 20, left: 20 }} | ||
| barGap={0} | ||
| barCategoryGap="0%" | ||
| > | ||
| <Bar barSize={barHeight} dataKey="value" fill={fillColor}> | ||
| <LabelList dataKey="name" position="right" content={customLabel} /> | ||
| </Bar> | ||
| <XAxis type="number" hide /> | ||
| <YAxis | ||
| type="category" | ||
| dataKey="value" | ||
| axisLine={false} | ||
| tickLine={false} | ||
| className={'font-bold'} | ||
| tick={{ fill: fillColor }} | ||
| tickFormatter={(value) => `${value}%`} | ||
| minTickGap={1} | ||
| /> | ||
| </BarChart> | ||
| </ResponsiveContainer> | ||
| ); | ||
| } | ||
|
|
||
| export default BarchartSurveyResponseComponent; |
3 changes: 0 additions & 3 deletions
3
website/src/app/[lang]/[region]/(website)/survey/responses/card-tab.css
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
website/src/app/[lang]/[region]/(website)/survey/responses/opacity.css
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters