From 1e65b2630bc513d54804360ec21ad134dbfa9c22 Mon Sep 17 00:00:00 2001 From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com> Date: Sun, 7 Dec 2025 21:30:37 +0000 Subject: [PATCH 1/3] feat(altair): implement area-basic (#524) ## Summary Implements `area-basic` for **altair** library. **Parent Issue:** #514 **Sub-Issue:** #519 **Base Branch:** `plot/area-basic` **Attempt:** 1/3 ## Implementation - `plots/altair/area/area-basic/default.py` ### Changes from initial template: - Used spec example data with proper month names (Jan-Dec) as ordinal values - Adjusted opacity to 0.7 for better visual clarity - Added `sort=None` to preserve month order - Configured proper axis labels and font sizes per style guide Closes #519 Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> --- plots/altair/area/area-basic/default.py | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plots/altair/area/area-basic/default.py b/plots/altair/area/area-basic/default.py index a147c10cf3..e208f167d7 100644 --- a/plots/altair/area/area-basic/default.py +++ b/plots/altair/area/area-basic/default.py @@ -10,20 +10,20 @@ # Data data = pd.DataFrame( { - "month": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], - "sales": [100, 150, 130, 180, 200, 220, 195, 240, 260, 230, 280, 310], + "month": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + "sales": [120, 135, 148, 162, 175, 195, 210, 198, 185, 170, 158, 190], } ) # Create chart with area and line chart = ( alt.Chart(data) - .mark_area(opacity=0.5, color="#306998", line={"color": "#306998", "strokeWidth": 2}) + .mark_area(opacity=0.7, color="#306998", line={"color": "#306998", "strokeWidth": 2}) .encode( - x=alt.X("month:Q", title="Month", axis=alt.Axis(labelFontSize=16, titleFontSize=20)), + x=alt.X("month:O", title="Month", sort=None, axis=alt.Axis(labelFontSize=16, titleFontSize=20)), y=alt.Y("sales:Q", title="Sales", axis=alt.Axis(labelFontSize=16, titleFontSize=20)), ) - .properties(width=1600, height=900, title=alt.TitleParams(text="Basic Area Chart", fontSize=20)) + .properties(width=1600, height=900, title=alt.TitleParams(text="Monthly Sales", fontSize=20)) .configure_view(strokeWidth=0) .configure_axis(grid=True, gridOpacity=0.3) ) From 8c667ff1812033adc99b8e5a82c2c27829913a58 Mon Sep 17 00:00:00 2001 From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com> Date: Sun, 7 Dec 2025 21:31:37 +0000 Subject: [PATCH 2/3] feat(highcharts): implement area-basic (#525) ## Summary Implements `area-basic` for **highcharts** library. **Parent Issue:** #514 **Sub-Issue:** #522 **Base Branch:** `plot/area-basic` **Attempt:** 1/3 ## Implementation - `plots/highcharts/area/area-basic/default.py` ### Features - Basic area chart showing monthly sales data - Uses Python Blue (#306998) with 0.6 fill opacity - Includes title, axis labels with appropriate font sizes - Data markers enabled for each point - Exports to 4800x2700 PNG via headless Chrome Closes #522 Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> --- plots/highcharts/area/area-basic/default.py | 48 ++++++++------------- 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/plots/highcharts/area/area-basic/default.py b/plots/highcharts/area/area-basic/default.py index d963fbca57..27eeae67c7 100644 --- a/plots/highcharts/area/area-basic/default.py +++ b/plots/highcharts/area/area-basic/default.py @@ -15,40 +15,32 @@ from selenium.webdriver.chrome.options import Options -# Data - Monthly sales example -sales = [100, 150, 130, 180, 200, 220, 195, 240, 280, 310, 290, 350] +# Data +months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] +sales = [120, 135, 148, 162, 175, 195, 210, 198, 185, 170, 158, 190] -# Create chart +# Create chart with container (required for headless export) chart = Chart(container="container") chart.options = HighchartsOptions() # Chart configuration -chart.options.chart = { - "type": "area", - "width": 4800, - "height": 2700, - "backgroundColor": "#ffffff", - "style": {"fontFamily": "Arial, sans-serif"}, -} +chart.options.chart = {"type": "area", "width": 4800, "height": 2700, "backgroundColor": "#ffffff"} # Title -chart.options.title = {"text": "Monthly Sales Trend", "style": {"fontSize": "48px"}} +chart.options.title = {"text": "Monthly Sales", "style": {"fontSize": "48px"}} -# Axes +# X-axis with categories chart.options.x_axis = { + "categories": months, "title": {"text": "Month", "style": {"fontSize": "40px"}}, - "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - "labels": {"style": {"fontSize": "32px"}, "enabled": True}, - "gridLineWidth": 1, - "gridLineColor": "rgba(0, 0, 0, 0.1)", - "tickmarkPlacement": "on", + "labels": {"style": {"fontSize": "32px"}}, } +# Y-axis chart.options.y_axis = { - "title": {"text": "Sales ($)", "style": {"fontSize": "40px"}}, + "title": {"text": "Sales", "style": {"fontSize": "40px"}}, "labels": {"style": {"fontSize": "32px"}}, - "gridLineWidth": 1, - "gridLineColor": "rgba(0, 0, 0, 0.1)", + "gridLineColor": "#e0e0e0", } # Legend @@ -59,13 +51,13 @@ series.data = sales series.name = "Sales" series.color = "#306998" -series.fill_opacity = 0.5 -series.line_width = 4 -series.marker = {"enabled": True, "radius": 6, "fillColor": "#306998", "lineWidth": 2, "lineColor": "#ffffff"} +series.fill_opacity = 0.6 +series.line_width = 3 +series.marker = {"enabled": True, "radius": 6, "fillColor": "#306998"} chart.add_series(series) -# Download Highcharts JS +# Download Highcharts JS for inline embedding highcharts_url = "https://code.highcharts.com/highcharts.js" with urllib.request.urlopen(highcharts_url, timeout=30) as response: highcharts_js = response.read().decode("utf-8") @@ -94,16 +86,12 @@ chrome_options.add_argument("--no-sandbox") chrome_options.add_argument("--disable-dev-shm-usage") chrome_options.add_argument("--disable-gpu") -chrome_options.add_argument("--window-size=4800,2800") +chrome_options.add_argument("--window-size=4800,2700") driver = webdriver.Chrome(options=chrome_options) -driver.set_window_size(4800, 2800) driver.get(f"file://{temp_path}") time.sleep(5) - -# Get the container element and screenshot it directly -container = driver.find_element("id", "container") -container.screenshot("plot.png") +driver.save_screenshot("plot.png") driver.quit() Path(temp_path).unlink() From 6d10f21642e8479f70e3e04b57cc13e6736d968d Mon Sep 17 00:00:00 2001 From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com> Date: Sun, 7 Dec 2025 21:32:10 +0000 Subject: [PATCH 3/3] feat(matplotlib): implement area-basic (#526) ## Summary Implements `area-basic` for **matplotlib** library. **Parent Issue:** #514 **Sub-Issue:** #515 **Base Branch:** `plot/area-basic` **Attempt:** 1/3 ## Implementation - `plots/matplotlib/fill_between/area-basic/default.py` The implementation uses `fill_between` to create a filled area chart with: - Monthly sales data as specified in the spec - Python Blue (#306998) color from the style guide - Proper axis labels and title matching spec name - Y-axis starting from 0 for accurate area representation - Grid with subtle styling Closes #515 Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> --- plots/matplotlib/fill_between/area-basic/default.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plots/matplotlib/fill_between/area-basic/default.py b/plots/matplotlib/fill_between/area-basic/default.py index 6bc7bcc5e7..4fda4b55c1 100644 --- a/plots/matplotlib/fill_between/area-basic/default.py +++ b/plots/matplotlib/fill_between/area-basic/default.py @@ -30,7 +30,7 @@ # Labels and styling ax.set_xlabel("Month", fontsize=20) ax.set_ylabel("Sales", fontsize=20) -ax.set_title("Monthly Sales Volume", fontsize=20) +ax.set_title("Basic Area Chart", fontsize=20) ax.tick_params(axis="both", labelsize=16) ax.grid(True, alpha=0.3, linestyle="--")