Merge pull request #28 from PolicyEngine/remove-scp-inflation

Remove SCP inflation policy from dashboard

Author: vahid-ahmadi

src/App.jsx

@@ -10,7 +10,6 @@ const POLICIES = [
   { id: "income_tax_basic_uplift", name: "Basic rate threshold uplift", category: "cost" },
   { id: "income_tax_intermediate_uplift", name: "Intermediate rate threshold uplift", category: "cost" },
   // SCP policies (costs to government)
-  { id: "scp_inflation", name: "SCP inflation adjustment", category: "cost" },
   { id: "scp_baby_boost", name: "SCP Premium for under-ones", category: "cost" },
   // Threshold freezes (revenue raisers)
   { id: "higher_rate_freeze", name: "Higher rate threshold freeze", category: "revenue" },
@@ -23,7 +22,6 @@ function App() {
   const [selectedPolicies, setSelectedPolicies] = useState([
     "income_tax_basic_uplift",
     "income_tax_intermediate_uplift",
-    "scp_inflation",
     "scp_baby_boost",
     "higher_rate_freeze",
     "advanced_rate_freeze",

src/components/BudgetBarChart.jsx

@@ -14,6 +14,37 @@ import {
 import "./BudgetBarChart.css";
 import { POLICY_COLORS, ALL_POLICY_NAMES, POLICY_NAMES } from "../utils/policyConfig";
 
+// Custom tooltip that orders items correctly with Net impact last
+const CustomTooltip = ({ active, payload, label, formatValue, formatYear, activePolicies }) => {
+  if (!active || !payload || payload.length === 0) return null;
+
+  // Sort payload: policies in activePolicies order, Net impact last
+  const sortedPayload = [...payload].sort((a, b) => {
+    if (a.name === "Net impact") return 1;
+    if (b.name === "Net impact") return -1;
+    const aIndex = activePolicies.indexOf(a.name);
+    const bIndex = activePolicies.indexOf(b.name);
+    return aIndex - bIndex;
+  });
+
+  return (
+    <div style={{
+      background: "white",
+      border: "1px solid #e5e7eb",
+      borderRadius: "6px",
+      padding: "10px 14px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+    }}>
+      <p style={{ margin: "0 0 8px 0", fontWeight: 600 }}>{formatYear(label)}</p>
+      {sortedPayload.map((entry, index) => (
+        <p key={index} style={{ margin: "4px 0", color: entry.color }}>
+          {entry.name} : {formatValue(entry.value)}
+        </p>
+      ))}
+    </div>
+  );
+};
+
 // Custom label component for net impact values
 const NetImpactLabel = (props) => {
   const { x, y, value } = props;
@@ -148,11 +179,11 @@ export default function BudgetBarChart({ data, title, description, stacked = fal
             tick={{ fontSize: 12 }}
           />
           <Tooltip
-            formatter={(value, name) => [
-              formatValue(value),
-              name === "Net impact" ? "Net impact" : name
-            ]}
-            labelFormatter={formatYear}
+            content={<CustomTooltip
+              formatValue={formatValue}
+              formatYear={formatYear}
+              activePolicies={activePolicies}
+            />}
           />
           {stacked && (
             <Legend

src/components/Dashboard.jsx

@@ -141,38 +141,6 @@ const summaryStyle = { cursor: "pointer", color: "#2c6e49", fontWeight: "500" };
 
 // Policy descriptions (active voice, clear impacts)
 const POLICY_INFO = {
-  scp_inflation: {
-    name: "SCP inflation adjustment",
-    description: "Scottish Child Payment uprated from £27.15 to £28.20/week",
-    explanation: (
-      <li>
-        <strong>SCP inflation adjustment</strong>: The Budget uprates the Scottish Child Payment
-        from £27.15 to £28.20 per week (+3.9% for inflation). This benefits all families receiving
-        SCP, providing approximately £55 extra per child per year.
-        <details className="policy-table-details" style={{ marginTop: "12px" }}>
-          <summary style={summaryStyle}>View SCP rates by year</summary>
-          <table style={tableStyle}>
-            <thead>
-              <tr>
-                <th style={thStyle}>Year</th>
-                <th style={thRightStyle}>Weekly rate</th>
-                <th style={thRightStyle}>Annual (per child)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr><td style={tdStyle}>2025-26</td><td style={tdRightStyle}>£27.15</td><td style={tdRightStyle}>£1,412</td></tr>
-              <tr><td style={tdStyle}>2026-27</td><td style={tdRightStyle}>£28.20</td><td style={tdRightStyle}>£1,466</td></tr>
-              <tr><td style={tdStyle}>2027-28</td><td style={tdRightStyle}>£28.85</td><td style={tdRightStyle}>£1,500</td></tr>
-              <tr><td style={tdStyle}>2028-29</td><td style={tdRightStyle}>£29.45</td><td style={tdRightStyle}>£1,531</td></tr>
-              <tr><td style={tdStyle}>2029-30</td><td style={tdRightStyle}>£30.05</td><td style={tdRightStyle}>£1,563</td></tr>
-              <tr><td style={{...tdStyle, borderBottom: "none"}}>2030-31</td><td style={{...tdRightStyle, borderBottom: "none"}}>£30.65</td><td style={{...tdRightStyle, borderBottom: "none"}}>£1,594</td></tr>
-            </tbody>
-          </table>
-          <p style={noteStyle}>Note: Uprated annually by CPI (September of prior year). Source: <a href="https://www.gov.scot/publications/scottish-budget-2026-2027/" target="_blank" rel="noopener noreferrer">Scottish Budget 2026-27</a> | <a href="https://fiscalcommission.scot/publications/scotlands-economic-and-fiscal-forecasts-january-2026/" target="_blank" rel="noopener noreferrer">SFC January 2026</a></p>
-        </details>
-      </li>
-    ),
-  },
   scp_baby_boost: {
     name: "SCP Premium for under-ones",
     description: "Scottish Child Payment raised to £40/week for babies under 1",
@@ -622,7 +590,6 @@ export default function Dashboard({ selectedPolicies = [] }) {
             <>
               {POLICY_INFO.income_tax_basic_uplift.explanation}
               {POLICY_INFO.income_tax_intermediate_uplift.explanation}
-              {POLICY_INFO.scp_inflation.explanation}
               {POLICY_INFO.scp_baby_boost.explanation}
               {POLICY_INFO.higher_rate_freeze.explanation}
               {POLICY_INFO.advanced_rate_freeze.explanation}

src/components/DecileChart.jsx

@@ -14,6 +14,37 @@ import {
 import "./DecileChart.css";
 import { POLICY_COLORS, ALL_POLICY_NAMES, REVENUE_POLICIES, POLICY_NAMES } from "../utils/policyConfig";
 
+// Custom tooltip that orders items correctly with Net change last
+const CustomTooltip = ({ active, payload, label, formatValue, activePolicies }) => {
+  if (!active || !payload || payload.length === 0) return null;
+
+  // Sort payload: policies in activePolicies order, Net change last
+  const sortedPayload = [...payload].sort((a, b) => {
+    if (a.name === "Net change") return 1;
+    if (b.name === "Net change") return -1;
+    const aIndex = activePolicies.indexOf(a.name);
+    const bIndex = activePolicies.indexOf(b.name);
+    return aIndex - bIndex;
+  });
+
+  return (
+    <div style={{
+      background: "white",
+      border: "1px solid #e5e7eb",
+      borderRadius: "6px",
+      padding: "10px 14px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+    }}>
+      <p style={{ margin: "0 0 8px 0", fontWeight: 600 }}>{label} decile</p>
+      {sortedPayload.map((entry, index) => (
+        <p key={index} style={{ margin: "4px 0", color: entry.color }}>
+          {entry.name} : {formatValue(entry.value)}
+        </p>
+      ))}
+    </div>
+  );
+};
+
 // Custom label component for net change values
 const NetChangeLabel = ({ x, y, value, viewMode }) => {
   if (value === undefined || value === null) return null;
@@ -302,17 +333,10 @@ export default function DecileChart({
             />
           )}
           <Tooltip
-            formatter={(value, name) => [
-              formatValue(value),
-              name === "Net change" ? "Net change" : name
-            ]}
-            labelFormatter={(label) => `${label} decile`}
-            contentStyle={{
-              background: "white",
-              border: "1px solid #e5e7eb",
-              borderRadius: "6px",
-              padding: "8px 12px",
-            }}
+            content={<CustomTooltip
+              formatValue={formatValue}
+              activePolicies={activePolicies}
+            />}
           />
           {stacked ? (
             activePolicies.map((policyName) => (

src/components/HouseholdCalculator.jsx

@@ -28,7 +28,6 @@ const CHART_COLORS = {
   total: "#0F766E", // Teal 700
   income_tax_basic_uplift: "#0D9488", // Teal 600
   income_tax_intermediate_uplift: "#0F766E", // Teal 700
-  scp_inflation: "#14B8A6", // Teal 500
   scp_baby_boost: "#2DD4BF", // Teal 400
   higher_rate_freeze: "#78350F", // Amber 900 (darkest)
   advanced_rate_freeze: "#92400E", // Amber 800
@@ -53,15 +52,14 @@ function HouseholdCalculator() {
   const [childAgeInput, setChildAgeInput] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [selectedYear, setSelectedYear] = useState(2026);
+  const [selectedYear, setSelectedYear] = useState(2027);
   const [showRealTerms, setShowRealTerms] = useState(false);
   const [impacts, setImpacts] = useState({
     income_tax_basic_uplift: 0,
     income_tax_intermediate_uplift: 0,
     higher_rate_freeze: 0,
     advanced_rate_freeze: 0,
     top_rate_freeze: 0,
-    scp_inflation: 0,
     scp_baby_boost: 0,
     total: 0,
   });
@@ -152,7 +150,6 @@ function HouseholdCalculator() {
         higher_rate_freeze: result.impacts.higher_rate_freeze,
         advanced_rate_freeze: result.impacts.advanced_rate_freeze,
         top_rate_freeze: result.impacts.top_rate_freeze,
-        scp_inflation: result.impacts.scp_inflation,
         scp_baby_boost: result.impacts.scp_baby_boost,
         total: result.total,
       });
@@ -234,15 +231,14 @@ function HouseholdCalculator() {
         (d.income_tax_basic_uplift || 0) + (d.income_tax_intermediate_uplift || 0),
         d.year
       ),
-      scp: toRealTerms((d.scp_inflation || 0) + (d.scp_baby_boost || 0), d.year),
+      scp: toRealTerms(d.scp_baby_boost || 0, d.year),
       total: toRealTerms(d.total, d.year),
       // Keep individual reform values for tooltip
       income_tax_basic_uplift: toRealTerms(d.income_tax_basic_uplift || 0, d.year),
       income_tax_intermediate_uplift: toRealTerms(d.income_tax_intermediate_uplift || 0, d.year),
       higher_rate_freeze: toRealTerms(d.higher_rate_freeze || 0, d.year),
       advanced_rate_freeze: toRealTerms(d.advanced_rate_freeze || 0, d.year),
       top_rate_freeze: toRealTerms(d.top_rate_freeze || 0, d.year),
-      scp_inflation: toRealTerms(d.scp_inflation || 0, d.year),
       scp_baby_boost: toRealTerms(d.scp_baby_boost || 0, d.year),
     }));
 
@@ -254,7 +250,7 @@ function HouseholdCalculator() {
       .padding(0.3);
 
     // Dynamic Y scale based on stacked values (sum positives and negatives separately)
-    const policyKeysForScale = ['income_tax_basic_uplift', 'income_tax_intermediate_uplift', 'higher_rate_freeze', 'advanced_rate_freeze', 'top_rate_freeze', 'scp_inflation', 'scp_baby_boost'];
+    const policyKeysForScale = ['income_tax_basic_uplift', 'income_tax_intermediate_uplift', 'higher_rate_freeze', 'advanced_rate_freeze', 'top_rate_freeze', 'scp_baby_boost'];
     let dataMax = 0;
     let dataMin = 0;
     processedData.forEach((d) => {
@@ -335,7 +331,6 @@ function HouseholdCalculator() {
       { key: 'higher_rate_freeze', color: CHART_COLORS.higher_rate_freeze },
       { key: 'advanced_rate_freeze', color: CHART_COLORS.advanced_rate_freeze },
       { key: 'top_rate_freeze', color: CHART_COLORS.top_rate_freeze },
-      { key: 'scp_inflation', color: CHART_COLORS.scp_inflation },
       { key: 'scp_baby_boost', color: CHART_COLORS.scp_baby_boost },
     ];
 
@@ -478,10 +473,6 @@ function HouseholdCalculator() {
               <span style="color:#B45309">Top rate freeze</span>
               <span style="font-weight:500">${formatVal(d.top_rate_freeze)}</span>
             </div>
-            <div style="display:flex;justify-content:space-between;margin-bottom:4px">
-              <span style="color:#14B8A6">SCP inflation</span>
-              <span style="font-weight:500">${formatVal(d.scp_inflation)}</span>
-            </div>
             <div style="display:flex;justify-content:space-between;margin-bottom:6px">
               <span style="color:#2DD4BF">SCP baby boost</span>
               <span style="font-weight:500">${formatVal(d.scp_baby_boost)}</span>
@@ -605,13 +596,13 @@ function HouseholdCalculator() {
       .attr("fill", "#6B7280")
       .attr("font-size", "11px");
 
-    // Area fill
+    // Area fill - use linear curve to show sharp cliffs (e.g., SCP eligibility)
     const area = d3
       .area()
       .x((d) => x(d.income))
       .y0(y(0))
       .y1((d) => y(d.total))
-      .curve(d3.curveMonotoneX);
+      .curve(d3.curveLinear);
 
     // Split data into positive and negative areas
     const positiveData = byIncomeData.map((d) => ({
@@ -635,12 +626,12 @@ function HouseholdCalculator() {
       .attr("fill", "rgba(180, 83, 9, 0.2)")
       .attr("d", area);
 
-    // Line
+    // Line - use linear curve to show sharp cliffs (e.g., SCP eligibility)
     const line = d3
       .line()
       .x((d) => x(d.income))
       .y((d) => y(d.total))
-      .curve(d3.curveMonotoneX);
+      .curve(d3.curveLinear);
 
     g.append("path")
       .datum(byIncomeData)
@@ -727,10 +718,6 @@ function HouseholdCalculator() {
               <span style="color:#B45309">Top rate freeze</span>
               <span style="font-weight:500">${formatVal(closest.top_rate_freeze)}</span>
             </div>
-            <div style="display:flex;justify-content:space-between;margin-bottom:4px">
-              <span style="color:#14B8A6">SCP inflation</span>
-              <span style="font-weight:500">${formatVal(closest.scp_inflation)}</span>
-            </div>
             <div style="display:flex;justify-content:space-between;margin-bottom:6px">
               <span style="color:#2DD4BF">SCP baby boost</span>
               <span style="font-weight:500">${formatVal(closest.scp_baby_boost)}</span>

src/components/LocalAreaSection.jsx

@@ -42,7 +42,6 @@ function parseCSVLine(line) {
 
 const POLICY_DISPLAY_NAMES = {
   scp_baby_boost: "SCP Premium for under-ones",
-  scp_inflation: "SCP inflation adjustment",
   income_tax_basic_uplift: "basic rate threshold uplift",
   income_tax_intermediate_uplift: "intermediate rate threshold uplift",
 };
@@ -153,6 +152,7 @@ export default function LocalAreaSection({
   }, [localAuthorityData]);
 
   // Calculate fixed color extent across ALL years for consistent map coloring
+  // Use symmetric round numbers for cleaner legend
   const fixedColorExtent = useMemo(() => {
     if (!rawLocalAuthorityData.length || !selectedPolicies.length) return null;
 
@@ -184,16 +184,20 @@ export default function LocalAreaSection({
 
     if (globalMin === Infinity || globalMax === -Infinity) return null;
 
-    // Determine type
-    let type = 'mixed';
-    if (globalMin >= 0) type = 'positive';
-    else if (globalMax <= 0) type = 'negative';
+    // Round to symmetric nice numbers - dynamically based on data range
+    const maxAbs = Math.max(Math.abs(globalMin), Math.abs(globalMax));
 
-    return {
-      min: Math.floor(globalMin),
-      max: Math.ceil(globalMax),
-      type
-    };
+    // Choose interval based on magnitude: 10, 25, 50, or 100
+    let interval;
+    if (maxAbs <= 30) interval = 10;
+    else if (maxAbs <= 75) interval = 25;
+    else if (maxAbs <= 150) interval = 50;
+    else interval = 100;
+
+    const roundedMax = Math.ceil(maxAbs / interval) * interval;
+
+    // Always use symmetric range with both colors (mixed type)
+    return { min: -roundedMax, max: roundedMax, type: 'mixed' };
   }, [rawLocalAuthorityData, selectedPolicies, availableYears]);
 
   // Handle local authority selection from map
@@ -333,7 +337,7 @@ export default function LocalAreaSection({
             <li key={la.code} className="local-authority-list-item">
               <span className="local-authority-list-name">{la.name}</span>
               <span className={`local-authority-list-value ${la.avgGain >= 0 ? "positive" : "negative"}`}>
-                £{la.avgGain.toFixed(2)}
+                {la.avgGain >= 0 ? `£${la.avgGain.toFixed(2)}` : `-£${Math.abs(la.avgGain).toFixed(2)}`}
               </span>
             </li>
           ))}

src/components/SFCComparisonTable.jsx

@@ -3,7 +3,7 @@ import "./SFCComparisonTable.css";
 
 function SFCComparisonTable() {
   const [comparisonData, setComparisonData] = useState(null);
-  const [showBehavioural, setShowBehavioural] = useState(true);
+  const [showBehavioural, setShowBehavioural] = useState(false);
 
   useEffect(() => {
     // Fetch both SFC comparison data and PolicyEngine budgetary impact data
@@ -252,8 +252,7 @@ function SFCComparisonTable() {
           the freeze was already in Budget 2025-26; SFC only costs the incremental
           extension through 2027-28/2028-29. SCP baby boost starts mid-2027-28.
           SFC reports combined basic + intermediate thresholds (~£50m total); we
-          apportion using PolicyEngine microsimulation. SCP inflation uprating has
-          no SFC costing as it's included in their baseline. See{" "}
+          apportion using PolicyEngine microsimulation. See{" "}
           <a
             href="https://fiscalcommission.scot/wp-content/uploads/2026/01/Scotlands-Economic-and-Fiscal-Forecasts-January-2026-revised-13-01-2026.pdf"
             target="_blank"