-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/overlay2-rework' into overlay2-r…
…ework
- Loading branch information
Showing
12 changed files
with
323 additions
and
145 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
85 changes: 85 additions & 0 deletions
85
src/frontend/overlay/src/components/molecules/statistics/StackedBars.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 |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import {Legend, StackedBarsData} from "./types"; | ||
| import styled from "styled-components"; | ||
| import c from "../../../config"; | ||
| import { ProblemLabel } from "../../atoms/ProblemLabel"; | ||
|
|
||
| const BarsWrapper = styled.div` | ||
| width: 100%; | ||
| height: 100%; | ||
| display: grid; | ||
| gap: ${c.STATISTICS_BAR_GAP}; | ||
| grid-auto-flow: column; | ||
| grid-template-rows: repeat(${({rowsCount}) => rowsCount}, 1fr); | ||
| ` | ||
|
|
||
| const BarWrapper = styled.div` | ||
| width: 100%; | ||
| height: ${c.STATISTICS_BAR_HEIGHT}; | ||
| line-height: ${c.STATISTICS_BAR_HEIGHT}; | ||
| display: grid; | ||
| gap: 0; | ||
| grid-template-columns: ${c.STATISTICS_BAR_HEIGHT} auto; | ||
| ` | ||
|
|
||
| const BarName = styled(ProblemLabel)` | ||
| width: ${c.STATISTICS_BAR_HEIGHT}; | ||
| background-color: ${({color}) => color}; | ||
| font-size: ${c.GLOBAL_DEFAULT_FONT_SIZE}; | ||
| font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; | ||
| text-align: center; | ||
| ` | ||
| //todo: set font widget | ||
|
|
||
| const BarValues = styled.div` | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| background-color: ${c.QUEUE_ROW_BACKGROUND}; | ||
| border-radius: 0 ${c.GLOBAL_BORDER_RADIUS} ${c.GLOBAL_BORDER_RADIUS} 0; | ||
| overflow: hidden; | ||
| ` | ||
|
|
||
| const BarValue = styled.div.attrs(({ value, caption }) => ({ | ||
| style: { | ||
| width: `calc(max(${value * 100}%, ${value === 0 ? 0 : ((caption?.length ?? -1) + 1)}ch))`, | ||
| } | ||
| }))` | ||
| height: ${c.STATISTICS_BAR_HEIGHT}; | ||
| line-height: ${c.STATISTICS_BAR_HEIGHT}; | ||
| transition: width linear ${c.STATISTICS_CELL_MORPH_TIME}ms; | ||
| overflow: hidden; | ||
| box-sizing: border-box; | ||
| font-size: ${c.GLOBAL_DEFAULT_FONT_SIZE}; | ||
| font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; | ||
| background-color: ${({color}) => color}; | ||
| color: ${c.STATISTICS_TITLE_COLOR}; | ||
| text-align: center; | ||
| ` | ||
|
|
||
| interface StackedBarsProps { | ||
| data: StackedBarsData; | ||
| legend: Legend; | ||
| } | ||
| export const StackedBars = ({data}: StackedBarsProps) => { | ||
| const rowsCount = data.length | ||
| return ( | ||
| <BarsWrapper rowsCount={rowsCount}> | ||
| {data.map((b) => { | ||
| return ( | ||
| <BarWrapper key={b.name}> | ||
| <BarName problemColor={b.color} letter={b.name}/> | ||
| <BarValues> | ||
| {b.values.map(v => ( | ||
| <BarValue key={v.color} color={v.color} value={v.value} caption={v.caption}> | ||
| {v.caption} | ||
| </BarValue> | ||
| ))} | ||
| </BarValues> | ||
| </BarWrapper> | ||
| ) | ||
| })} | ||
| </BarsWrapper> | ||
| ); | ||
| } |
53 changes: 53 additions & 0 deletions
53
src/frontend/overlay/src/components/molecules/statistics/StatisticsLegend.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 |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import {Legend} from "./types"; | ||
| import styled from "styled-components"; | ||
| import c from "../../../config"; | ||
|
|
||
|
|
||
| const LegendsWrapper = styled.div` | ||
| width: 100%; | ||
| height: 100%; | ||
| display: grid; | ||
| gap: ${c.STATISTICS_BAR_GAP}; | ||
| //grid-template-columns: auto; | ||
| grid-auto-flow: column; | ||
| justify-content: end; | ||
| align-content: center; | ||
| ` | ||
|
|
||
| const LegendCardWrapper = styled.div` | ||
| width: 100%; | ||
| background-color: ${({color}) => color}; | ||
| border-radius: ${c.GLOBAL_BORDER_RADIUS}; | ||
| ` | ||
|
|
||
| const LegendWrapper = styled.div` | ||
| line-height: ${c.STATISTICS_BAR_HEIGHT}; | ||
| font-size: ${c.GLOBAL_DEFAULT_FONT_SIZE}; | ||
| font-family: ${c.GLOBAL_DEFAULT_FONT_FAMILY}; | ||
| text-align: center; | ||
| margin: 8px 16px; | ||
| ` | ||
|
|
||
| type LegendCardProps = { color: string; caption: string }; | ||
|
|
||
| export const LegendCard = ({ color, caption }: LegendCardProps) => { | ||
| return ( | ||
| <LegendCardWrapper color={color}> | ||
| <LegendWrapper> | ||
| {caption} | ||
| </LegendWrapper> | ||
| </LegendCardWrapper> | ||
| ); | ||
| } | ||
|
|
||
| type StatisticsLegendsProps = { legend: Legend }; | ||
|
|
||
| export const StatisticsLegend = ({legend}: StatisticsLegendsProps) => { | ||
| return ( | ||
| <LegendsWrapper> | ||
| {legend?.map((l) => ( | ||
| <LegendCard caption={l.caption} color={l.color}></LegendCard> | ||
| ))} | ||
| </LegendsWrapper> | ||
| ); | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/frontend/overlay/src/components/molecules/statistics/types.ts
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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export interface BarValue { | ||
| readonly color: string; | ||
| readonly caption: string; | ||
| readonly value: number; | ||
| } | ||
|
|
||
| export interface BarData { | ||
| readonly name: string; | ||
| readonly color: string; | ||
| readonly values: BarValue[]; | ||
| } | ||
|
|
||
| export interface LegendDescription { | ||
| readonly caption: string; | ||
| readonly color: string; | ||
| } | ||
|
|
||
| export type Legend = LegendDescription[]; | ||
|
|
||
| export type StackedBarsData = BarData[]; | ||
|
|
||
| export interface StatisticsData { | ||
| readonly data: StackedBarsData; // | other statistics data | ||
| readonly legend: Legend; | ||
| } |
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
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
131 changes: 0 additions & 131 deletions
131
src/frontend/overlay/src/components/organisms/widgets/Statistics.jsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.