Skip to content

Commit

Permalink
Style polish
Browse files Browse the repository at this point in the history
  • Loading branch information
hanbyul-here committed Mar 24, 2024
1 parent ee8cbe1 commit cd0667d
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,19 @@ interface DatasetChartProps {
onUpdateSettings: (type: string, m: DataMetric[]) => void;
}

const ChartAnalysisMenu = styled.div`
const ChartAnalysisMenu = styled.div<{axisWidth: number}>`
width: inherit;
position: relative;
display: flex;
justify-content: end;
margin-right: 6.5rem;
margin-right: calc(${props=> props.axisWidth}px + 0.5rem);
z-index: 3000;
`;
const AxisBackground = styled.div`
const AxisBackground = styled.div<{axisWidth: number}>`
position: absolute;
right: 0;
top: 0;
width: ${props=> props.width}px;
width: ${props=> props.axisWidth}px;
height: 100%;
background-color: #F0F0F0;
z-index: -1;
Expand Down Expand Up @@ -73,7 +73,7 @@ export function DatasetChart(props: DatasetChartProps) {
const extents = [
...enhancedTimeseries.flatMap(d => extent(lineMetrics.map(m => d[m.id]))),
...areaMetrics.length && enhancedTimeseries.flatMap(d => extent([d[areaDataKey]].flat())),
].filter(Boolean); // Filter out falsey values if areaMetrics.length is 0
].filter(Boolean); // Filter out falsey values
return extent(extents.flat()) as [undefined, undefined] | [number, number];
}, [enhancedTimeseries, lineMetrics, areaMetrics]);

Expand All @@ -94,10 +94,10 @@ export function DatasetChart(props: DatasetChartProps) {
There are no active metrics to visualize.
</DatasetTrackMessage>
)}
<ChartAnalysisMenu>
<ChartAnalysisMenu axisWidth={RIGHT_AXIS_SPACE}>
<LayerChartAnalysisMenu activeMetrics={activeMetrics} onChange={onUpdateSettings} triggerIcon={chartAnalysisIconTrigger} />
</ChartAnalysisMenu>
<AxisBackground width={RIGHT_AXIS_SPACE} />
<AxisBackground axisWidth={RIGHT_AXIS_SPACE} />
<svg width={width + RIGHT_AXIS_SPACE} height={height}>
<clipPath id='data-clip'>
<rect width={width} height={height} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@ import { scaleTime, ScaleTime } from 'd3';

import { glsp, themeVal } from '@devseed-ui/theme-provider';
import {
CollecticonChevronDownSmall,
CollecticonResizeIn,
CollecticonResizeOut
CollecticonChevronDownSmall
} from '@devseed-ui/collecticons';
import { DatePicker } from '@devseed-ui/date-picker';
import { Toolbar, ToolbarGroup, VerticalDivider } from '@devseed-ui/toolbar';

import { DateAxis } from './date-axis';
import { TimelineZoomControls } from './timeline-zoom-controls';
import { isExpandedAtom } from '$components/exploration/atoms/timeline';
import {
selectedCompareDateAtom,
selectedDateAtom,
Expand Down Expand Up @@ -99,8 +96,6 @@ export function TimelineControls(props: TimelineControlsProps) {
selectedCompareDateAtom
);
const [selectedInterval, setSelectedInterval] = useAtom(selectedIntervalAtom);
const { isAnalyzing } = useAnalysisController();
const [isExpanded, setExpanded] = useAtom(isExpandedAtom);
const { features } = useAois();

// Scale to use when there are no datasets with data (loading or error)
Expand Down Expand Up @@ -248,7 +243,7 @@ export function TimelineControls(props: TimelineControlsProps) {

<VerticalDivider />

<TipToolbarIconButton
{/* <TipToolbarIconButton
tipContent={
isExpanded ? 'Hide chart y-axis' : 'Show chart y-axis'
}
Expand All @@ -269,7 +264,7 @@ export function TimelineControls(props: TimelineControlsProps) {
title='Expand dataset rows'
/>
)}
</TipToolbarIconButton>
</TipToolbarIconButton> */}
</>
) : (
<TimelineZoomControls onZoom={onZoom} />
Expand Down

0 comments on commit cd0667d

Please sign in to comment.