Skip to content

Commit

Permalink
Settings: Metric Configuration: Playtesting Followups - Default Defin…
Browse files Browse the repository at this point in the history 
…ition 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 <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
  • Loading branch information
@mxosman
mxosman and Mahmoud authored Oct 25, 2022
1 parent ebdbe36 commit 306eaa3
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 81 deletions.
30 changes: 14 additions & 16 deletions publisher/src/components/MetricConfiguration/Configuration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,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 Down
55 changes: 51 additions & 4 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 @@ -169,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 @@ -209,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 @@ -288,6 +320,7 @@ export const Dimension = styled.div<{ enabled?: boolean; inView?: boolean }>`
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
}
`}
Expand All @@ -307,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 @@ -478,16 +512,25 @@ export const MetricConfigurationWrapper = styled.div`
display: flex;
justify-content: space-between;
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-left: 126px;
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 @@ -549,6 +592,7 @@ export const DefinitionSelection = styled.div`

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

export const NoDefinitionsSelected = styled.div`
Expand Down
30 changes: 17 additions & 13 deletions publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {
Configuration,
Metric,
MetricBox,
MetricBoxBottomPaddingContainer,
MetricConfigurationDisplay,
MetricConfigurationWrapper,
MetricDefinitions,
Expand Down Expand Up @@ -279,6 +280,7 @@ export const MetricConfiguration: React.FC<{

return {
...disaggregation,
enabled: true,
dimensions: disaggregation.dimensions.map((dimension) => {
if (
dimension.key ===
Expand Down Expand Up @@ -521,19 +523,21 @@ export const MetricConfiguration: React.FC<{

<MetricsViewControlPanel>
{/* List Of Metrics */}
{filteredMetricSettings &&
!activeMetricKey &&
Object.values(filteredMetricSettings).map((metric) => (
<MetricBox
key={metric.key}
metricKey={metric.key}
displayName={metric.display_name}
frequency={metric.frequency as ReportFrequency}
description={metric.description}
enabled={metric.enabled}
setActiveMetricKey={setActiveMetricKey}
/>
))}
{filteredMetricSettings && !activeMetricKey && (
<MetricBoxBottomPaddingContainer>
{Object.values(filteredMetricSettings).map((metric) => (
<MetricBox
key={metric.key}
metricKey={metric.key}
displayName={metric.display_name}
frequency={metric.frequency as ReportFrequency}
description={metric.description}
enabled={metric.enabled}
setActiveMetricKey={setActiveMetricKey}
/>
))}
</MetricBoxBottomPaddingContainer>
)}

{/* Metric Configuration */}
{activeMetricKey && (
Expand Down
117 changes: 69 additions & 48 deletions publisher/src/components/MetricConfiguration/MetricDefinitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// =============================================================================

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

import {
Metric,
Expand Down Expand Up @@ -62,6 +62,8 @@ export const MetricDefinitions: React.FC<MetricDefinitionsProps> = ({
contexts,
saveAndUpdateMetricSettings,
}) => {
const [showDefaultSettings, setShowDefaultSettings] = useState(false);

const selectionOptions: MetricConfigurationSettingsOptions[] = [
"N/A",
"No",
Expand Down Expand Up @@ -131,65 +133,84 @@ export const MetricDefinitions: React.FC<MetricDefinitionsProps> = ({
</span>
</DefinitionsDescription>

<RevertToDefaultButton onClick={revertToDefaultValues}>
Revert to Default Definition
<RevertToDefaultButton
onClick={() => {
setShowDefaultSettings(false);
revertToDefaultValues();
}}
onMouseEnter={() =>
!showDefaultSettings && setShowDefaultSettings(true)
}
onMouseLeave={() => setShowDefaultSettings(false)}
>
Choose Default Definition
</RevertToDefaultButton>

<Definitions>
{activeSettings?.map((setting) => (
<DefinitionItem key={setting.key}>
<DefinitionDisplayName>{setting.label}</DefinitionDisplayName>

<DefinitionSelection>
{selectionOptions.map((option) => (
<Fragment key={option}>
<DefinitionMiniButton
selected={setting.included === option}
onClick={() => {
if (isMetricSettings(activeDimensionOrMetric)) {
return saveAndUpdateMetricSettings(
"METRIC_SETTING",
{
key: activeMetricKey,
settings: [{ ...setting, included: option }],
}
);
}
{(showDefaultSettings ? defaultSettings : activeSettings)?.map(
(setting) => (
<DefinitionItem key={setting.key}>
<DefinitionDisplayName>
{setting.label}
</DefinitionDisplayName>

<DefinitionSelection>
{selectionOptions.map((option) => (
<Fragment key={option}>
<DefinitionMiniButton
selected={setting.included === option}
showDefault={showDefaultSettings}
onClick={() => {
if (isMetricSettings(activeDimensionOrMetric)) {
return saveAndUpdateMetricSettings(
"METRIC_SETTING",
{
key: activeMetricKey,
settings: [
{ ...setting, included: option },
],
}
);
}

const activeDimensionKey =
activeDimensionOrMetric.key;
const activeDimensionKey =
activeDimensionOrMetric.key;

return (
activeDisaggregation &&
saveAndUpdateMetricSettings("DIMENSION_SETTING", {
key: activeMetricKey,
disaggregations: [
return (
activeDisaggregation &&
saveAndUpdateMetricSettings(
"DIMENSION_SETTING",
{
key: activeDisaggregation.key,
dimensions: [
key: activeMetricKey,
disaggregations: [
{
key: activeDimensionKey,
settings: [
key: activeDisaggregation.key,
dimensions: [
{
...setting,
included: option,
key: activeDimensionKey,
settings: [
{
...setting,
included: option,
},
],
},
],
},
],
},
],
})
);
}}
>
{option}
</DefinitionMiniButton>
</Fragment>
))}
</DefinitionSelection>
</DefinitionItem>
))}
}
)
);
}}
>
{option}
</DefinitionMiniButton>
</Fragment>
))}
</DefinitionSelection>
</DefinitionItem>
)
)}
</Definitions>
</>
)}
Expand Down

0 comments on commit 306eaa3

Please sign in to comment.