Skip to content
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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/dev 9146 #1548

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Feature/dev 9146 #1548

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c29d7b2
[DEV-9146] Update legend top and filters positions
Atash3000 Sep 26, 2024
b28e2f9
[DEV-9146] Merge branch 'dev' into feature/DEV-9146
Atash3000 Sep 26, 2024
c110808
[DEV-9146] Clean code
Atash3000 Sep 26, 2024
3a23a82
[DEV-9146] Update CDC chart config types
Atash3000 Sep 26, 2024
4a75a34
Merge dev
Atash3000 Oct 4, 2024
c1b6ae4
[DEV-9146] Implement bootstrap class
Atash3000 Oct 4, 2024
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
71 changes: 41 additions & 30 deletions packages/chart/src/CdcChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Button from '@cdc/core/components/elements/Button'

//types
import { DimensionsType } from '@cdc/core/types/Dimensions'
import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'

// External Libraries
import { scaleOrdinal } from '@visx/scale'
Expand Down Expand Up @@ -72,6 +73,20 @@ import { filterVizData } from '@cdc/core/helpers/filterVizData'
import LegendWrapper from './components/LegendWrapper'
import _ from 'lodash'

interface CdcChartProps {
configUrl: string
config?: ChartConfig
isEditor?: boolean
isDebug?: boolean
isDashboard?: boolean
setConfig: (config: ChartConfig) => void
setEditing?: (editing: boolean) => void
hostname?: string
link?: string
setSharedFilter?: (filter: any) => void
setSharedFilterValue?: (value: any) => void
dashboardConfig?: DashboardConfig
}
export default function CdcChart({
configUrl,
config: configObj,
Expand All @@ -85,7 +100,7 @@ export default function CdcChart({
setSharedFilter,
setSharedFilterValue,
dashboardConfig
}) {
}: CdcChartProps) {
const transform = new DataTransform()
const [loading, setLoading] = useState(true)
const [colorScale, setColorScale] = useState(null)
Expand Down Expand Up @@ -1305,38 +1320,34 @@ export default function CdcChart({
classes={['chart-title', `${config.theme}`, 'cove-component__header']}
style={undefined}
/>
{/* Intro Text/Message */}
{config?.introText && config.visualizationType !== 'Spark Line' && (
<section
className={`introText legend_${config.legend.hide ? 'hidden' : 'visible'}_${config.legend.position} `}
>
{parse(config.introText)}
</section>
)}

{/* Filters */}
{config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
<Filters
config={config}
setConfig={setConfig}
setFilteredData={setFilteredData}
filteredData={filteredData}
excludedData={excludedData}
filterData={filterVizData}
dimensions={dimensions}
/>
)}
<SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
{config.annotations?.length > 0 && (
<SkipTo
skipId={handleChartTabbing(config, legendId)}
skipMessage={`Skip over annotations`}
key={`skip-annotations`}
/>
)}

{/* Visualization Wrapper */}
<div className={getChartWrapperClasses().join(' ')}>
{/* Intro Text/Message */}
{config?.introText && config.visualizationType !== 'Spark Line' && (
<section className={`introText `}>{parse(config.introText)}</section>
)}

{/* Filters */}
{config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
<Filters
config={config}
setConfig={setConfig}
setFilteredData={setFilteredData}
filteredData={filteredData}
excludedData={excludedData}
filterData={filterVizData}
dimensions={dimensions}
/>
)}
<SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
{config.annotations?.length > 0 && (
<SkipTo
skipId={handleChartTabbing(config, legendId)}
skipMessage={`Skip over annotations`}
key={`skip-annotations`}
/>
)}
<LegendWrapper>
<div
className={
Expand Down
44 changes: 4 additions & 40 deletions packages/chart/src/scss/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,10 @@
border: 1px solid $lightGray;
position: relative;

&.top {
Atash3000 marked this conversation as resolved.
Show resolved Hide resolved
padding: 0;
}

&.no-border {
border: 1px solid transparent;
}
Expand Down Expand Up @@ -456,46 +460,6 @@
}
}

.filters-section {
margin-left: 1rem;
margin-right: 1rem;

&__title {
margin: 15px 0;
}

&__wrapper {
hr {
margin-bottom: 20px;
}

label {
display: inherit;
margin-bottom: 5px;
font-weight: 600;
font-size: 16px;
}
}

@include breakpoint(md) {
display: flex;
gap: 30px;
}

label:not(:empty) {
margin-right: 0.4em;
}

select {
font-size: 1em;
padding-right: 5px;
}

.single-filter {
margin-bottom: 0.5em;
}
}

@include breakpointClass(xs) {
&.font-small {
font-size: 0.8em;
Expand Down
3 changes: 2 additions & 1 deletion packages/chart/src/types/ChartContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { PickD3Scale } from '@visx/scale'
import { type SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
import { type Annotation } from '@cdc/core/types/Annotation'
import { DimensionsType } from '@cdc/core/types/Dimensions'

import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
export type ColorScale = PickD3Scale<'ordinal', any, any>

export type TransformedData = {
Expand Down Expand Up @@ -33,6 +33,7 @@ type SharedChartContext = {
isEditor?: boolean
// whether or not the user is dragging an annotation
isDraggingAnnotation?: boolean
dashboardConfig?: DashboardConfig
}

// Line Chart Specific Context
Expand Down
3 changes: 2 additions & 1 deletion packages/core/components/Filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,10 +484,11 @@ const Filters = (props: FilterProps) => {
}`,
type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme
]

return (
<section className={filterSectionClassList.join(' ')}>
<p className='filters-section__intro-text'>
{filters?.some(f => f.active && f.showDropdown) ? filterConstants.introText : ''}{' '}
{filters?.some(filter => filter.active && filter.columnName) ? filterConstants.introText : ''}{' '}
{visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
</p>
<div className='filters-section__wrapper'>
Expand Down
3 changes: 0 additions & 3 deletions packages/core/styles/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,9 +183,6 @@ select {
section.introText {
width: 100%;
margin-bottom: 25px;
&.legend_visible_top {
Atash3000 marked this conversation as resolved.
Show resolved Hide resolved
margin-bottom: 0;
}
}

section.footnotes {
Expand Down
6 changes: 6 additions & 0 deletions packages/core/styles/filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
gap: 7px 15px;
margin-top: 15px;
margin-bottom: 15px;
label {
Atash3000 marked this conversation as resolved.
Show resolved Hide resolved
display: inherit;
margin-bottom: 5px;
font-weight: 600;
font-size: 16px;
}
}

&__intro-text {
Expand Down
Loading