Storybook.Web

Home

Title	Weather Chart
Description	Weather Chart POC
Namespace	AccuWeather.Core.UI.Web.Views.Charts.WeatherChart

Name	Control
Id	hourly-rain
Dark Mode	TrueFalse
Title	Afternoon Forecast
Subtitle	Heavy rain from Hurricane Ida
CtaText	See Hourly Forecast
CtaUrl	https://www.accuweather.com/en/us/lancaster/17603/hourly-weather-forecast/331
LegendContent	Precipitation Probability
TickWidth	86
BottomOffset	30
Datasets	Name hourly-rain Type Color Type Data [ { "DataValue": 98, "Label": "98%", "TopLabel": "1 PM", "IconCode": 18 }, { "DataValue": 84, "Label": "84%", "TopLabel": "2 PM", "IconCode": 18 }, { "DataValue": 82, "Label": "82%", "TopLabel": "3 PM", "IconCode": 18 }, { "DataValue": 75, "Label": "75%", "TopLabel": "4 PM", "IconCode": 18 } ]

.component-container {
	width: 352px;
}

.weather-chart[data-chart-id='hourly-forecast'] text.sub-label {
	font-size: 16px;
	font-weight: 500;
}

.weather-chart[data-chart-id='hourly-forecast'] .weather-chart-title {
	color: rgba(255, 255, 255, 0.6);
}

.weather-chart[data-chart-id='hourly-forecast'] .data-charts text.top-label {
	font-size: 11px;
	letter-spacing: -0.055px;
}

.weather-chart[data-chart-id='hourly-forecast'] .pill {
	fill: #fff;
}

.weather-chart[data-chart-id='hourly-forecast'] .data-icon {
	transform: translateY(5px);
}

.weather-chart[data-chart-id='hourly-forecast'] g[data-index='1'] .top-label {
	fill: #212121;
}

.weather-chart g.chart-quarter-day-realfeel circle {
	fill: #fff;
	r: 2px;
	stroke: #25292f;
	stroke-width: 1px;
}

.weather-chart .data-charts g.chart-quarter-day-realfeel path {
	stroke: rgba(255, 255, 255, 0.6);
	stroke-dasharray: 0.5 5;
	stroke-linecap: round;
}

.weather-chart g.chart-quarter-day-realfeel .sub-label {
	font-size: 14px;
	opacity: 0.6;
	font-weight: 500;
}

Run Tests

Html Code

CSS code

Scripts