Per Pupil Transportation

This portion of the tool allows users to model replacing Arizona’s current transportation funding system with a simple per student allotment that applies to all students. Users can enter in a single amount below, and the model will calculate how each school district’s transportation funding would be affected. All data are from October BSA-55 reports published by the department of education.

viewof perPupilTotal = form(
  html`
    <form style="text-align: left; font-size: 16px; margin-top: -15px; margin-bottom: 10px;">
        <label class="per-pupil-switch">
          <input id="per-pupil" type="radio" name="optradio" value="0">Per Pupil
        </label>
        <label class="total-switch">
          <input id="total" type="radio" name="optradio"  value="1" checked>Total
        </label>
    </form>
  `
)

viewof perPupilTranspoInput = form(html`<form style="font-size: 24px;">
  <div >$ <input name="amount" type="number" min="1" value="330"></div>
</form>`);
perPupilTranspo = perPupilTranspoInput.amount;


inputPanel = html`

<div id="wrapper-2">
  <div class="box-title" style="border: none;"><span style="font-size: 20px; font-weight: 700;">Per Pupil Transportation Amount:</span></div>
  <div class="box-item" style="text-align: center; border: none;">${viewof perPupilTranspoInput}</div>
</div>

`

html`
<style>

#per-pupil, #total {
  display: none;
}

.per-pupil-switch {
    background-color: ${perPupilTotal1Color};
  border-radius: 5px 0 0 5px;
  border: 1px solid #000;
  padding: 5px;
}

.total-switch {
    background-color: ${perPupilTotal2Color};
  border-radius: 0 5px 5px 0;
  border: 1px solid #000;
  padding: 5px;
}
`

perPupilTotal1Color = {
  if (perPupilTotal.optradio == '0') {
    return "#d3d3d3"
  } else {
    return "#fff"
  }
};

perPupilTotal2Color = {
  if (perPupilTotal.optradio == '1') {
    return "#d3d3d3"
  } else {
    return "#fff"
  }
};

color = d3.scaleQuantize([-1, 1], ["#d7191c", "#fdae61", "#fff", "#a6d96a", "#1a9641"].reverse())

html`
<h3>Transportation Costs</h3>
${viewof perPupilTotal}
<div class="wrapper-3">
  <div class="box-title" style="text-align: right; width: 200px;"></div>
  <div class="box-title" style="margin-left: 10px; font-weight: 700; width: 140px;">District</div>
 <div class="box-title" style="margin-left: 10px; font-weight: 700; width: 140px;">Charter</div>
</div>

<div class="wrapper-3">
  <div class="box-title" style="text-align: right; width: 200px;">Current TRCL</div>
  <div class="box-item" style="font-size: 20px; width: 140px;">${d3.format("$,.0f")(districtSummary[0].CD_TRCL_23)}</div>
 <div class="box-item" style="font-size: 20px; width: 140px;">${d3.format("$,.0f")(charterSummary[0].CD_TRCL_23)}</div>
</div>

<br>

<div class="wrapper-3">
  <div class="box-title" style="font-size: 18px; text-align: right; width: 200px;">Per Pupil Funding</div>
  <div class="box-item" style="font-size: 20px; width: 140px;">${d3.format("$,.0f")(districtSummary[0].PPT_TSL)}</div>
 <div class="box-item" style="font-size: 20px; width: 140px;">${d3.format("$,.0f")(charterSummary[0].PPT_TSL)}</div>
</div>

<br>

<div class="wrapper-3">
  <div class="box-title" style="text-align: right; width: 200px;">Districts/Charters with Increases</div>
  <div class="box-item" style="font-size: 20px; width: 140px;">${districtSummary[0].count}</div>
 <div class="box-item" style="font-size: 20px; width: 140px;">${charterSummary[0].count}</div>
</div>
`

html`
<style>

#district , #charter {
  display: none;
}

.district-switch {
    background-color: ${districtCharter1Color};
  border-radius: 5px 0 0 5px;
  border: 1px solid #000;
  padding: 5px;
}

.charter-switch {
    background-color: ${districtCharter2Color};
  border-radius: 0 5px 5px 0;
  border: 1px solid #000;
  padding: 5px;
}
`

districtCharter1Color = {
  if (districtCharter.optradio == '0') {
    return "#d3d3d3"
  } else {
    return "#fff"
  }
};

districtCharter2Color = {
  if (districtCharter.optradio == '1') {
    return "#d3d3d3"
  } else {
    return "#fff"
  }
};

viewof districtCharter = form(
  html`
    <form style="text-align: center; font-size: 16px;">
        <label class="district-switch">
          <input id="district" type="radio" name="optradio" value="0" checked>District
        </label>
        <label class="charter-switch">
          <input id="charter" type="radio" name="optradio"  value="1">Charter
        </label>
    </form>
  `
)

// import {select, slider, checkbox, number} from "@jashkenas/inputs";

// viewof newFilter = text({
//   placeholder: 'e.g. St Johns Unified District',
//   title: 'Search for district'
// })

viewof newFilter = form(html`<form>
  <div style="margin: 0;"><input name="message" type="text" value=""></div>
  `)

html`

    <div style="width: 100%; max-width: 1200px; margin: 30px 0 0 0;">
        <div style="width: 33%; float: left;">
            <p><span style="font-size: 14px;">Search for district:
${viewof newFilter}</span></p>
        </div>
        <div style="width: 33%; float: left; text-align: center;">
            <p>${viewof districtCharter}</p>
        </div>
        <div style="width: 33%; float: left; text-align: right; margin-right: 0;">
            <p> </p>
        </div>
    </div>


`

tableDataTemp = {
  if (districtCharter.optradio == '0') {
    if (perPupilTotal.optradio == '1') {
      return aq.from(districtData)
        .derive({
                CD_TRCL_23_p: d => +d.CD_TRCL_23 / +d.ADM,
                PPT_TSL_p: d => +d.PPT_TSL / +d.ADM
                })
        .derive({
          diff: d =>  +d.PPT_TSL_p - +d.CD_TRCL_23_p
        })
        .orderby(aq.desc('diff'))
        .objects();
    } else {
      return aq.from(districtData)
        .orderby('NAME')
        .derive({
                CD_TRCL_23: d => +d.CD_TRCL_23 / +d.ADM,
                PPT_TSL: d => +d.PPT_TSL / +d.ADM
                })
        .derive({
          diff: d =>  +d.PPT_TSL - +d.CD_TRCL_23
        })
        .orderby(aq.desc('diff'))
        .objects();
    }

  } else {
    if (perPupilTotal.optradio == '1') {
      return aq.from(charterData)
        .orderby('NAME')
        .objects();
    } else {
      return aq.from(charterData)
        .orderby('NAME')
        .derive({
                CD_TRCL_23: d => +d.CD_TRCL_23 / +d.ADM,
                PPT_TSL: d => +d.PPT_TSL / +d.ADM
                })
        .objects();
    }
  }
}

tableData = tableDataTemp.filter(d => d.NAME.match(new RegExp(newFilter.message, 'i')));

html`
<div class="data-table">
    <table>
        <tr>
            <th rowspan=2 colspan=2>Districts</th>
            <th colspan=3>Transportation Funding</th>
        </tr>
        <tr>
            <th>Current</th>
            <th>Modeled</th>
            <th>Difference</th>
        </tr>
        
        ${tableData.map((d, i) => html`
        <tr>
            <td style="background-color: ${i % 2 == 0 ? "#f5f5f5" : "#fff"};">
            ${d.ID}
            </td>
            <td style="background-color: ${i % 2 == 0 ? "#f5f5f5" : "#fff"};">
            ${d.NAME}
            </td>
            <td style="background-color: ${i % 2 == 0 ? "#f5f5f5" : "#fff"}; font-weight: 600;">
            ${d3.format("$,.0f")(d.CD_TRCL_23).replace('$NaN', '$0')}
            </td>
              <td style="background-color: ${i % 2 == 0 ? "#f5f5f5" : "#fff"}; font-weight: 600;">
            ${d3.format("$,.0f")(d.PPT_TSL).replace('$NaN', '$0')}
            </td>
              <td style="background-color: ${i % 2 == 0 ? "#f5f5f5" : "#fff"}; font-weight: 600;">
            ${d3.format("$,.0f")(d.PPT_TSL - d.CD_TRCL_23).replace('$NaN', '$0')}
            </td>
        </tr>
        `)
        }
    </table>
</div>

`

functions = {
    aq.addFunction('round5', x => x.toFixed(5), { override: true })
    aq.addFunction('round10', x => x.toFixed(10), { override: true })
    aq.addFunction('round4', x => x.toFixed(4), { override: true })
    aq.addFunction('round3', x => x.toFixed(3), { override: true })
    aq.addFunction('round2', x => x.toFixed(2), { override: true })
    aq.addFunction('trunc', x => Math.trunc(x), { override: true })
    }


districtDataTemp = FileAttachment("data/arizona/district_data.csv").csv()

districtData = aq.from(districtDataTemp)
        .params({perPupilTranspo: perPupilTranspo})
        .derive({
        CD_TWINAS_CYK8: d => d.NAOI_CYK8 * d.SUPP_LWK8,
        CD_TWINAS_CY912: d => d.NAOI_CY912 * d.SUPP_LW912,
        CD_TWINAS_CYPSD: d => d.NAOI_CYPSD * d.SUPP_LWPSD,
        CD_TWINAS_K3_READ: d => d.NAOI_CYK3R * 0.04,
        CD_TWINAS_K3: d => d.NAOI_CYK3 * 0.06,
        CD_TWINAS_ELL: d => d.NAOI_ELL * 0.115,
        CD_TWINAS_SPED_1: d => d.NAOI_SPED_1 * 4.771,
        CD_TWINAS_SPED_2: d => d.NAOI_SPED_2 * 6.024,
        CD_TWINAS_SPED_3: d => d.NAOI_SPED_3 * 5.988,
        CD_TWINAS_SPED_4: d => d.NAOI_SPED_4 * 7.947,
        CD_TWINAS_SPED_5: d => d.NAOI_SPED_5 * 3.158,
        CD_TWINAS_SPED_6: d => d.NAOI_SPED_6 * 6.773,
        CD_TWINAS_SPED_7: d => d.NAOI_SPED_7 * 3.595,
        CD_TWINAS_SPED_8: d => d.NAOI_SPED_8 * 0.292,
        CD_TWINAS_SPED_9: d => d.NAOI_SPED_9 * 4.822,
        CD_TWINAS_SPED_10: d => d.NAOI_SPED_10 * 4.421,
        CD_TWINAS_SPED_11: d => d.NAOI_SPED_11 * 4.806,

        CD_TWAFT_CYK8: d => d.AFT_CYK8 * d.SUPP_LWK8,
        CD_TWAFT_CY912: d => d.AFT_CY912 * d.SUPP_LW912,
        CD_TWAFT_CYPSD: d => d.AFT_CYPSD * d.SUPP_LWPSD,
        CD_TWAFT_K3_READ: d => d.AFT_CYK3R * 0.04,
        CD_TWAFT_K3: d => d.AFT_CYK3 * 0.06,
        CD_TWAFT_ELL: d => d.AFT_ELL * 0.115,
        CD_TWAFT_SPED_1: d => d.AFT_SPED_1 * 4.771,
        CD_TWAFT_SPED_2: d => d.AFT_SPED_2 * 6.024,
        CD_TWAFT_SPED_3: d => d.AFT_SPED_3 * 5.988,
        CD_TWAFT_SPED_4: d => d.AFT_SPED_4 * 7.947,
        CD_TWAFT_SPED_5: d => d.AFT_SPED_5 * 3.158,
        CD_TWAFT_SPED_6: d => d.AFT_SPED_6 * 6.773,
        CD_TWAFT_SPED_7: d => d.AFT_SPED_7 * 3.595,
        CD_TWAFT_SPED_8: d => d.AFT_SPED_8 * 0.292,
        CD_TWAFT_SPED_9: d => d.AFT_SPED_9 * 4.822,
        CD_TWAFT_SPED_10: d => d.AFT_SPED_10 * 4.421,
        CD_TWAFT_SPED_11: d => d.AFT_SPED_11 * 4.806,

        CD_TWAPT_CYK8: d => d.APT_CYK8 * d.SUPP_LWK8,
        CD_TWAPT_CY912: d => d.APT_CY912 * d.SUPP_LW912,
        CD_TWAPT_CYPSD: d => d.APT_CYPSD * d.SUPP_LWPSD,
        CD_TWAPT_K3_READ: d => d.APT_CYK3R * 0.04,
        CD_TWAPT_K3: d => d.APT_CYK3 * 0.06,
        CD_TWAPT_ELL: d => d.APT_ELL * 0.115,
        CD_TWAPT_SPED_1: d => d.APT_SPED_1 * 4.771,
        CD_TWAPT_SPED_2: d => d.APT_SPED_2 * 6.024,
        CD_TWAPT_SPED_3: d => d.APT_SPED_3 * 5.988,
        CD_TWAPT_SPED_4: d => d.APT_SPED_4 * 7.947,
        CD_TWAPT_SPED_5: d => d.APT_SPED_5 * 3.158, 
        CD_TWAPT_SPED_6: d => d.APT_SPED_6 * 6.773,
        CD_TWAPT_SPED_7: d => d.APT_SPED_7 * 3.595,
        CD_TWAPT_SPED_8: d => d.APT_SPED_8 * 0.292,
        CD_TWAPT_SPED_9: d => d.APT_SPED_9 * 4.822,
        CD_TWAPT_SPED_10: d => d.APT_SPED_10 * 4.421,
        CD_TWAPT_SPED_11: d => d.APT_SPED_11 * 4.806
    })
    .derive({
        CD_M_BSL: d => +op.round2(((d.CD_TWINAS_CYK8 + d.CD_TWINAS_CY912 + d.CD_TWINAS_CYPSD + 
                         d.CD_TWINAS_K3_READ + d.CD_TWINAS_K3 + d.CD_TWINAS_ELL +
                         d.CD_TWINAS_SPED_1 + d.CD_TWINAS_SPED_2 + d.CD_TWINAS_SPED_3 +
                         d.CD_TWINAS_SPED_4 + d.CD_TWINAS_SPED_5 + d.CD_TWINAS_SPED_6 +
                         d.CD_TWINAS_SPED_7 + d.CD_TWINAS_SPED_8 + d.CD_TWINAS_SPED_9 +
                         d.CD_TWINAS_SPED_10 + d.CD_TWINAS_SPED_11) * d.B_COST) +
                       ((d.CD_TWAFT_CYK8 + d.CD_TWAFT_CY912 + d.CD_TWAFT_CYPSD +
                         d.CD_TWAFT_K3_READ + d.CD_TWAFT_K3 + d.CD_TWAFT_ELL +
                         d.CD_TWAFT_SPED_1 + d.CD_TWAFT_SPED_2 + d.CD_TWAFT_SPED_3 +
                         d.CD_TWAFT_SPED_4 + d.CD_TWAFT_SPED_5 + d.CD_TWAFT_SPED_6 +
                         d.CD_TWAFT_SPED_7 + d.CD_TWAFT_SPED_8 + d.CD_TWAFT_SPED_9 +
                         d.CD_TWAFT_SPED_10 + d.CD_TWAFT_SPED_11) * 0.95 * d.B_COST) +
                       ((d.CD_TWAPT_CYK8 + d.CD_TWAPT_CY912 + d.CD_TWAPT_CYPSD +
                         d.CD_TWAPT_K3_READ + d.CD_TWAPT_K3 + d.CD_TWAPT_ELL +
                         d.CD_TWAPT_SPED_1 + d.CD_TWAPT_SPED_2 + d.CD_TWAPT_SPED_3 +
                         d.CD_TWAPT_SPED_4 + d.CD_TWAPT_SPED_5 + d.CD_TWAPT_SPED_6 +
                         d.CD_TWAPT_SPED_7 + d.CD_TWAPT_SPED_8 + d.CD_TWAPT_SPED_9 +
                         d.CD_TWAPT_SPED_10 + d.CD_TWAPT_SPED_11) * 0.85 * d.B_COST))
    })
    .derive({ CD_M_ADJ_BSL: d => d.CD_M_BSL * d.TEI })
    .derive({
        CD_BSL_BRCL: d => +d.CD_M_ADJ_BSL + +d.B_SUPP_ADJ,
        CD_TSL_TF_SSL: d => +op.round2(d.TSL_TADRM * 180 * d.TSL_SSLRM)
    })
    .derive({
        CD_TSL_ATS: d => +op.round2(d.CD_TSL_TF_SSL * d.TSL_ATF),
        CD_TSL_HESYSL: d => +d.TSL_HESYM
    })
    .derive({ CD_TSL_SL: d => +op.round2(+d.CD_TSL_TF_SSL + +d.CD_TSL_ATS + +d.CD_TSL_HESYSL + +d.TSL_AEBPT) })
    .derive({ PPT_TSL: (d, $) => d.CD_TSL_SL === 0 ? 0 : +op.round2((+d.NAOI_CYPSD + +d.NAOI_CYK8 + +d.NAOI_CY912) * $.perPupilTranspo) })
    .derive({ CD_TRCL_PRELIM: d => +op.round2(+d.CD_TSL_SL - +d.TRCL_TSL_2122 + +d.TRCL_2122) })
    .derive({ 
        CD_TRCL_23_TSL: d => +op.round2(d.CD_TSL_SL * 1.2)
    })
    .derive({
        CD_TRCL_ADJ_23: d => +d.CD_TRCL_PRELIM > +d.CD_TRCL_23_TSL ? +d.TRCL_2122 : +d.CD_TRCL_PRELIM
    })
    .derive({
        CD_TRCL_23: d => +d.CD_TSL_SL > +d.CD_TRCL_ADJ_23 ? +d.CD_TSL_SL : +d.CD_TRCL_ADJ_23
    })
    .derive({ ADM: d => +d.NAOI_CYPSD + +d.NAOI_CYK8 + +d.NAOI_CY912 })
    .select('ID', 'NAME', 'CD_TSL_SL', 'CD_TRCL_23', 'PPT_TSL', 'ADM')
    .objects();

// districtSummary = aq.from(districtData)
//     .derive({ CD_TSL_SL: d => +d.CD_TSL_SL })
//     .derive({ PPT_TSL: d => +d.PPT_TSL })
//     .derive({ ADM: d => +d.ADM })
//     .rollup({
//         CD_TSL_SL: op.sum('CD_TSL_SL'),
//         PPT_TSL: op.sum('PPT_TSL'),
//         ADM: op.sum('ADM')
//     })
//     .objects();

districtSummary = {
    if (perPupilTotal.optradio === '1') {
        return aq.from(districtData)
            .derive({ CD_TRCL_23: d => +d.CD_TRCL_23 })
            .derive({ PPT_TSL: d => +d.PPT_TSL })
            .derive({ count: d => +d.CD_TRCL_23 < +d.PPT_TSL ? 1 : 0})
            .derive({ ADM: d => +d.ADM })
            .rollup({
                CD_TRCL_23: op.sum('CD_TRCL_23'),
                PPT_TSL: op.sum('PPT_TSL'),
                ADM: op.sum('ADM'),
                count: op.sum('count')
            })
            .objects()
    }
    else {
        return aq.from(districtData)
            .derive({ CD_TRCL_23: d => +d.CD_TRCL_23 })
            .derive({ PPT_TSL: d => +d.PPT_TSL })
            .derive({ count: d => +d.CD_TRCL_23 < +d.PPT_TSL ? 1 : 0})
            .derive({ ADM: d => +d.ADM })
            .rollup({
                CD_TRCL_23: op.sum('CD_TRCL_23'),
                PPT_TSL: op.sum('PPT_TSL'),
                ADM: op.sum('ADM'),
                count: op.sum('count')
            })
            .derive({
                CD_TRCL_23: d => +d.CD_TRCL_23 / +d.ADM,
                PPT_TSL: d => +d.PPT_TSL / +d.ADM
                })
            .objects()
    }
};

charterDataTemp = FileAttachment("data/arizona/charter_data.csv").csv();

charterData = aq.from(charterDataTemp)
        .params({perPupilTranspo: perPupilTranspo})
        .derive({ CD_TRCL_23: 0})
        .derive({ PPT_TSL: (d, $) =>  +op.round2((+d.NAOI_CYK8 + +d.NAOI_CY912) * $.perPupilTranspo) })
        .derive({ ADM: d => +d.NAOI_CYK8 + +d.NAOI_CY912 })
        .select('ID', 'NAME', 'CD_TRCL_23', 'PPT_TSL', 'ADM')
        .objects();


charterSummary = {
    if (perPupilTotal.optradio === '1') {
        return aq.from(charterData)
            .derive({ CD_TRCL_23: d => +d.CD_TRCL_23 })
            .derive({ PPT_TSL: d => +d.PPT_TSL })
            .derive({ count: d => +d.CD_TRCL_23 < +d.PPT_TSL ? 1 : 0})
            .derive({ ADM: d => +d.ADM })
            .rollup({
                CD_TRCL_23: op.sum('CD_TRCL_23'),
                PPT_TSL: op.sum('PPT_TSL'),
                ADM: op.sum('ADM'),
                count: op.sum('count')
            })
            .objects()
    }
    else {
        return aq.from(charterData)
            .derive({ CD_TRCL_23: d => +d.CD_TRCL_23 })
            .derive({ PPT_TSL: d => +d.PPT_TSL })
            .derive({ count: d => +d.CD_TRCL_23 < +d.PPT_TSL ? 1 : 0})
            .derive({ ADM: d => +d.ADM })
            .rollup({
                CD_TRCL_23: op.sum('CD_TRCL_23'),
                PPT_TSL: op.sum('PPT_TSL'),
                ADM: op.sum('ADM'),
                count: op.sum('count')
            })
            .derive({
                CD_TRCL_23: d => +d.CD_TRCL_23 / +d.ADM,
                PPT_TSL: d => +d.PPT_TSL / +d.ADM
                })
            .objects()
    }
}

function formValue(form) {
  const object = {};
  for (const input of form.elements) {
    if (input.disabled || !input.hasAttribute("name")) continue;
    let value = input.value;
    switch (input.type) {
      case "range":
      case "number": {
        value = input.valueAsNumber;
        break;
      }
      case "date": {
        value = input.valueAsDate;
        break;
      }
      case "radio": {
        if (!input.checked) continue;
        break;
      }
      case "checkbox": {
        if (input.checked) value = true;
        else if (input.name in object) continue;
        else value = false;
        break;
      }
      case "file": {
        value = input.multiple ? input.files : input.files[0];
        break;
      }
      case "select-multiple": {
        value = Array.from(input.selectedOptions, option => option.value);
        break;
      }
    }
    object[input.name] = value;
  }
  return object;
}

function form(form) {
  const container = html`<div>${form}`;
  form.addEventListener("submit", event => event.preventDefault());
  form.addEventListener("change", () => container.dispatchEvent(new CustomEvent("input")));
  form.addEventListener("input", () => container.value = formValue(form));
  container.value = formValue(form);
  return container
}

aq = {
  const aq = await require(`arquero@${aq_version}`);

  // load and install any additional packages
  (await Promise.all(aq_packages.map(pkg => require(pkg))))
    .forEach(pkg => aq.addPackage(pkg));

  // Add HTML table view method to tables
  aq.addTableMethod('view', toView, { override: true });

  return aq;
};
aq_version = "5.1.0";
aq_packages = [];

op = aq.op;
toView = {
  const DEFAULT_LIMIT = 100;
  const DEFAULT_NULL = value => `<span style="color: #999;">${value}</span>`;
  const tableStyle = 'margin: 0; border-collapse: collapse; width: initial;';
  const cellStyle = 'padding: 1px 5px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;';

  // extend table prototype to provide an HTML table view
  return function(dt, opt = {}) {
    // permit shorthand for limit
    if (typeof opt === 'number') opt = { limit: opt };
    
    // marshal cell color options
    const color = { ...opt.color };
    if (typeof opt.color === 'function') {
      // if function, apply to all columns
      dt.columnNames().forEach(name => color[name] = opt.color);
    } else {
      // otherwise, gather per-column color options
      for (const key in color) {
        const value = color[key];
        color[key] = typeof value === 'function' ? value : () => value;
      }
    }

    // marshal CSS styles as toHTML() options
    const table = `${tableStyle}`;
    const td = (name, index, row) => {
      return `${cellStyle} max-width: ${+opt.maxCellWidth || 300}px;`
        + (color[name] ? ` background-color: ${color[name](index, row)};` : '');
    };

    opt = {
      limit: DEFAULT_LIMIT,
      null: DEFAULT_NULL,
      ...opt,
      style: { table, td, th: td }
    };

    // return container div, bind table value to support viewof operator
    const size = `max-height: ${+opt.height || 270}px`;
    const style = `${size}; overflow-x: auto; overflow-y: auto;`;
    const view = html`<div style="${style}">${dt.toHTML(opt)}</div>`;
    view.value = dt;
    return view;
  };
};

html`
<style>

.wrapper-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.box-title {
    padding: 0 20px 0 20px;
    text-align: center;
    font-weight: 500;
}

.box-item {
    border: 3px solid #2e3745;
    background-color: #fff;
    color: #2e3745;
    font-weight: 700;
    text-align: center;
    padding: 20px 0 20px 0;
    margin: 0 10px 0 10px;
}

</style>
`

style_sheet = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
    font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
    padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

select {
  font-family: 'Open Sans', sans-serif;
  // border-radius: 20px;
  background-color: #fff;
}

.chip-circle {
    border-radius: 50%;
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
  }



label {
  margin-top: 20px;
  padding: 10px;
  padding-right:15px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
    color: #2e3745;
  font-weight: 600;
}




input[type="range"] {
    -webkit-appearance: none;
    border: none;
    margin: 18px 0;
    width: 100%;
    box-shadow: -2px -2px 8px white, 2px 2px 8px rgba(black, 0.5);
}
input[type="range"]:focus {
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}


input[type="range"]::-webkit-slider-thumb {
    height: 15px;
    width: 15px;
    border-radius: 30px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.37);
    /* border: 1px solid #333; */
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #fff;
    border: none;
}
input[type="range"]::-moz-range-track {
    border: none;
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}
input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    border-radius: 30px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.37);
    /* border: 1px solid #333; */
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}
input[type="range"]::-ms-track {
    border: none;
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background: #e0e0e0;
    border-radius: 2.6px;
}
input[type="range"]::-ms-fill-upper {
    background: #e0e0e0;
    border-radius: 2.6px;
}
input[type="range"]::-ms-thumb {
    border: none;
    height: 20px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
input[type="range"]:focus::-ms-fill-lower {
    background: #fff;
}
input[type="range"]:focus::-ms-fill-upper {
    background: #fff;
}

.oi-ec050e input[type=checkbox] {
  height: 25px;
  width: 25px;
  background-color: #f63;
}

#grid-2 {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #fff;
}

#grid-3 {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fff;
}

#grid-4 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #fff;
}

#grid-4-full {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #fff;
  border-top: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}


#grid-4-top {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #fff;
  border-top: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}

#grid-4-bottom {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #fff;
  border-bottom: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}


#grid-6-top {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  background-color: #fff;
  border-top: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}

#grid-6-bottom {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  background-color: #fff;
  border-bottom: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #d3d3d3;
  padding: 20px;
  font-size: 16px;
  text-align: left;
}

.wrapper-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.wrapper-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wrapper-1 {
  display: grid;
  grid-template-columns: 1fr;
}


    .data-table table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0.1rem;
        overflow-y: scroll;
        font-size: 14px;
    }

    .data-table td,
    .data-table th {
        padding: 0.3rem;
        word-wrap: break-word;
        border-bottom: 0;
        text-align: center;
        font-size: 14px;
    }

    .data-table td:nth-child(1) {
        text-align: left;
    }

    .data-table th {
        color: #fff;
        background-color: #384354;
        position: sticky;
    }

    .data-table td {
        background-color: #fff;
    }


    .sort {
      display: none
    }

.box-title {
    text-align: center;
    font-weight: 500;
    color: #333;
    font-size: 18px;
}

.box-item {
    border: 3px solid #2e3745;
    background-color: #fff;
    color: #2e3745;
    font-weight: 700;
    text-align: center;
    padding: 10px 0 10px 0;
    margin: 0 10px 0 10px;
    font-size: 22px;
}

</style>`