Skip to content

Commit

Permalink
Settings: Metric Configuration: Save Definitions (and Replace Mocks) …
Browse files Browse the repository at this point in the history 
…(6/n) (#108)

* [Summary] Remove mocks and implement definition saving functionality and UI update functionality

* Revert to default values functionality

* Fix revert to default for metric setting

* Clean up comment

* PR feedback: reverse the conditionals

* Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110)

* Remove tabs in metric list when agency has only one system

* Change casing to capitalized case on Monthly Annual badges

* Reduce spacing of Settings menu

* Scroll gap adjustment

* Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112)

* Add arrow vector, add logic for persisting on click, update hover and active states, clean up

* Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113)

* Add hover feature to display the default settings when user hovers over the revert button

* Update to Choose instead of Revert per design

* Clean up

* Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n)  (#115)

* When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation

* Styling bug fixes

* Implement responsiveness per design (#117)

Co-authored-by: Mahmoud <[email protected]>
  • Loading branch information
@mxosman
mxosman and Mahmoud authored Oct 25, 2022
1 parent be2d044 commit a10fbc5
Show file tree
Hide file tree
Showing 6 changed files with 414 additions and 168 deletions.
53 changes: 32 additions & 21 deletions publisher/src/components/MetricConfiguration/Configuration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,15 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";

import { Metric, MetricDisaggregationDimensions } from "../../shared/types";
import {
Metric,
MetricDisaggregationDimensions,
MetricDisaggregations as MetricDisaggregationsType,
} from "../../shared/types";
import { removeSnakeCase } from "../../utils";
import { ReactComponent as RightArrowIcon } from "../assets/right-arrow.svg";
import blueCheck from "../assets/status-check-icon.png";
import { BinaryRadioButton } from "../Forms";
import { TabbedBar, TabbedItem, TabbedOptions } from "../Reports";
Expand All @@ -44,6 +49,11 @@ import {
type MetricConfigurationProps = {
activeMetricKey: string;
filteredMetricSettings: { [key: string]: Metric };
activeDimension: MetricDisaggregationDimensions | undefined;
activeDisaggregation: MetricDisaggregationsType | undefined;
setActiveDisaggregation: React.Dispatch<
React.SetStateAction<MetricDisaggregationsType | undefined>
>;
saveAndUpdateMetricSettings: (
typeOfUpdate: "METRIC" | "DISAGGREGATION" | "DIMENSION" | "CONTEXT",
updatedSetting: MetricSettings,
Expand All @@ -57,12 +67,12 @@ type MetricConfigurationProps = {
export const Configuration: React.FC<MetricConfigurationProps> = ({
activeMetricKey,
filteredMetricSettings,
activeDimension,
activeDisaggregation,
setActiveDisaggregation,
saveAndUpdateMetricSettings,
setActiveDimension,
}): JSX.Element => {
const [activeDisaggregation, setActiveDisaggregation] = useState(
filteredMetricSettings[activeMetricKey]?.disaggregations?.[0]
);
const metricDisplayName =
filteredMetricSettings[activeMetricKey]?.display_name;
const metricEnabled = Boolean(
Expand Down Expand Up @@ -201,6 +211,7 @@ export const Configuration: React.FC<MetricConfigurationProps> = ({
<Dimension
key={dimension.key}
enabled={!metricEnabled || activeDisaggregation.enabled}
inView={dimension.key === activeDimension?.key}
onClick={() => setActiveDimension(dimension)}
>
<CheckboxWrapper>
Expand All @@ -210,22 +221,20 @@ export const Configuration: React.FC<MetricConfigurationProps> = ({
activeDisaggregation.enabled && dimension.enabled
}
onChange={() => {
if (activeDisaggregation.enabled) {
saveAndUpdateMetricSettings("DIMENSION", {
key: activeMetricKey,
disaggregations: [
{
key: activeDisaggregation.key,
dimensions: [
{
key: dimension.key,
enabled: !dimension.enabled,
},
],
},
],
});
}
saveAndUpdateMetricSettings("DIMENSION", {
key: activeMetricKey,
disaggregations: [
{
key: activeDisaggregation.key,
dimensions: [
{
key: dimension.key,
enabled: !dimension.enabled,
},
],
},
],
});
}}
/>
<BlueCheckIcon
Expand All @@ -245,6 +254,8 @@ export const Configuration: React.FC<MetricConfigurationProps> = ({
>
{dimension.label}
</DimensionTitle>

<RightArrowIcon />
</DimensionTitleWrapper>
</Dimension>
);
Expand Down
99 changes: 82 additions & 17 deletions publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,18 @@ import styled from "styled-components/macro";
import { BinaryRadioGroupWrapper, Button } from "../Forms";
import { palette, typography } from "../GlobalStyles";

const METRICS_VIEW_CONTAINER_BREAKPOINT = 1200;

export const MetricsViewContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
overflow: unset;
}
`;

export const MetricsViewControlPanel = styled.div`
Expand All @@ -35,6 +41,12 @@ export const MetricsViewControlPanel = styled.div`
flex-wrap: wrap;
justify-content: space-between;
overflow-y: scroll;
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
flex-direction: column;
flex-wrap: nowrap;
justify-content: unset;
}
`;

export const MetricsViewControlPanelOverflowHidden = styled(
Expand Down Expand Up @@ -63,6 +75,13 @@ export const PanelContainerRight = styled.div`
overflow-y: scroll;
`;

export const MetricBoxBottomPaddingContainer = styled.div`
display: flex;
flex-wrap: wrap;
padding-bottom: 100px;
overflow-y: scroll;
`;

type MetricBoxContainerProps = {
enabled?: boolean;
};
Expand All @@ -84,6 +103,12 @@ export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
cursor: pointer;
border: 1px solid ${palette.solid.blue};
}
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
width: 100%;
max-width: unset;
flex: unset;
}
`;

export const MetricViewBoxContainer = styled(MetricBoxContainer)<{
Expand Down Expand Up @@ -118,25 +143,34 @@ export const MetricNameBadgeWrapper = styled.div`
align-items: center;
`;

export const Metric = styled.div`
export const Metric = styled.div<{ inView: boolean }>`
width: 100%;
display: flex;
gap: 20px;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid ${palette.solid.darkgrey};
padding-bottom: 8px;
padding-right: 50px;
padding: 12px;
position: relative;
background: ${({ inView }) =>
inView ? palette.highlight.lightblue1 : `none`};
&:hover {
background: ${palette.highlight.grey1};
cursor: pointer;
}
&:hover:after {
content: "➝";
svg {
position: absolute;
${typography.sizeCSS.title}
right: 0;
opacity: ${({ inView }) => (inView ? `1` : `0`)};
right: ${({ inView }) => (inView ? `13px` : `-20px`)};
transition: opacity 0.2s ease, right 0.3s ease;
}
&:hover svg {
display: block;
right: 13px;
opacity: 1;
}
`;

Expand All @@ -160,7 +194,12 @@ export const MetricDescription = styled.div`
export const MetricDetailsDisplay = styled.div`
width: 100%;
overflow-y: scroll;
padding: 24px 12px 24px 0;
padding: 24px 12px 50px 0;
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
overflow-y: unset;
padding: 24px 12px 10px 0;
}
`;

export const MetricOnOffWrapper = styled.div`
Expand Down Expand Up @@ -200,6 +239,8 @@ export const MetricDisaggregations = styled.div<{ enabled?: boolean }>`
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 2;
opacity: 0.5;
}
`}
Expand Down Expand Up @@ -236,24 +277,33 @@ export const DisaggregationTab = styled.div`
}
`;

export const Dimension = styled.div<{ enabled?: boolean }>`
export const Dimension = styled.div<{ enabled?: boolean; inView?: boolean }>`
${typography.sizeCSS.medium};
display: flex;
align-items: center;
gap: 12px;
padding: 15px 0;
padding: 17px 10px;
border-bottom: 1px solid ${palette.highlight.grey4};
position: relative;
background: ${({ inView }) =>
inView ? palette.highlight.lightblue1 : `none`};
&:hover {
background: ${palette.highlight.grey1};
cursor: pointer;
}
&:hover::before {
content: "➝";
svg {
position: absolute;
right: 0;
${typography.sizeCSS.title}
opacity: ${({ inView }) => (inView ? `1` : `0`)};
right: ${({ inView }) => (inView ? `13px` : `-20px`)};
transition: opacity 0.2s ease, right 0.3s ease;
}
&:hover svg {
display: block;
right: 13px;
opacity: 1;
}
&:last-child {
Expand All @@ -270,6 +320,7 @@ export const Dimension = styled.div<{ enabled?: boolean }>`
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
}
`}
Expand All @@ -289,6 +340,7 @@ export const DimensionTitle = styled.div<{ enabled?: boolean }>`
export const CheckboxWrapper = styled.div`
display: flex;
position: relative;
z-index: 1;
`;

export const Checkbox = styled.input`
Expand Down Expand Up @@ -459,17 +511,26 @@ export const MetricConfigurationWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-between;
gap: 126px;
overflow-y: hidden;
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
flex-direction: column;
}
`;

export const DefinitionsDisplayContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1 1 55%;
padding-top: 48px;
padding-right: 12px;
padding: 48px 12px 50px 126px;
overflow-y: scroll;
@media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
border-top: 1px solid ${palette.highlight.grey3};
padding: 30px 0 50px 0;
overflow-y: unset;
margin-right: 12px;
}
`;

export const DefinitionsDisplay = styled.div`
Expand Down Expand Up @@ -531,6 +592,7 @@ export const DefinitionSelection = styled.div`

export const DefinitionMiniButton = styled(RevertToDefaultButton)<{
selected?: boolean;
showDefault?: boolean;
}>`
width: unset;
padding: 9px 16px;
Expand All @@ -556,6 +618,9 @@ export const DefinitionMiniButton = styled(RevertToDefaultButton)<{
`};
${({ showDefault, selected }) =>
showDefault && !selected && `color: ${palette.highlight.grey4};`};
`;

export const NoDefinitionsSelected = styled.div`
Expand Down
Loading

0 comments on commit a10fbc5

Please sign in to comment.