d3#sum TypeScript Examples
The following examples show how to use
d3#sum.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BarChart.ts From anichart.js with MIT License | 6 votes |
|
private getConvolveKernel(kw: number) {
const normalFunc = function normal(x: number) {
return (1 / Math.sqrt(2 * Math.PI)) * Math.exp(-(x ** 2 / 2));
};
let kernel = range(
-kw,
kw,
(((2 * kw) / this.swapDurationMS) * 1000) / this.stage!.options.fps
).map((v) => normalFunc(v));
if (kernel.length % 2 !== 1) {
kernel.shift();
}
const ks = sum(kernel);
kernel = kernel.map((v) => v / ks);
return kernel;
}
Example #2
| Source File: PieChart.ts From anichart.js with MIT License | 6 votes |
|
private getPieData(sec: number) {
const currentData = [...this.dataScales.values()].map((scale) => {
return scale(sec);
});
const minRadio = this.minRadio / 360;
const sumValue = sum(currentData, (d) => d[this.valueField]);
const minValue = sumValue * minRadio;
const pieGen = pie()
.padAngle((Math.PI / 180) * this.padAngle)
.value((d) => max([d[this.valueField], minValue]));
currentData.sort((a, b) => {
if (Number.isNaN(b[this.valueField])) {
return -1;
} else if (Number.isNaN(a[this.valueField])) {
return 1;
} else {
return b[this.idField] - a[this.idField];
}
});
const pieData = pieGen(currentData);
return pieData;
}
Example #3
| Source File: Series.ts From anichart.js with MIT License | 5 votes |
|
addScene(scene: Scene) {
scene.offsetSec += sum(this.children, (d) => d.durationSec);
scene.parent = this;
this.children.push(scene);
}
Example #4
| Source File: manufacturer.tsx From the-researcher-covid-tracker with GNU General Public License v3.0 | 4 votes |
|
function ManufacturerTable(props) {
const [showAll, setShowAll] = useState<boolean>(false)
const [isDescSort, setIsDescSort] = useState(true)
const [sortData, setSortData] = useState({
column: 'total_doses',
direction: 'down'
})
var data = props.province_vaccine_manufacturer["data"]
//data = data.filter(province => province.id !== '0')
data.map((province, index) => {
data[index]["JnJ"] = province["Johnson & Johnson"]
data[index]["Sinovac-share"] = province["Sinovac"] / province["total_doses"]
data[index]["AstraZeneca-share"] = province["AstraZeneca"] / province["total_doses"]
data[index]["Pfizer-share"] = province["Pfizer"] / province["total_doses"]
data[index]["Sinopharm-share"] = province["Sinopharm"] / province["total_doses"]
data[index]["JnJ-share"] = province["JnJ"] / province["total_doses"]
})
var national_sum = {}
national_sum['total_doses'] = sum(data, d => d['total_doses'])
national_sum['AstraZeneca'] = sum(data, d => d['AstraZeneca'])
national_sum['Sinovac'] = sum(data, d => d['Sinovac'])
national_sum['Pfizer'] = sum(data, d => d['Pfizer'])
national_sum['Sinopharm'] = sum(data, d => d['Sinopharm'])
national_sum['Johnson & Johnson'] = sum(data, d => d['Johnson & Johnson'])
const [provincesData, setData] = useState(undefined)
function sortChange(column) {
if (column == sortData.column) {
setIsDescSort(!isDescSort)
}
setSortData({
column: column,
direction: isDescSort ? 'down' : 'up'
})
}
useEffect(() => {
data = _.orderBy(data, sortData.column)
if (sortData.direction == 'down') {
data.reverse()
}
setData(data)
}, [sortData])
return (
<div>
<div className='mt-3 table-responsive'>
<table className="table table-theme-light text-white w-100 position-relative" style={{ fontSize: '90%' }}>
<thead>
<tr>
<th className='text-left' style={{ minWidth: 100 }} scope="col">จังหวัด</th>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='total_doses'
text='จำนวนวัคซีนที่ฉีด'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='AstraZeneca'
text='AstraZeneca'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='Sinovac'
text='Sinovac'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='Pfizer'
text='Pfizer'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='Sinopharm'
text='Sinopharm'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='JnJ'
text='J&J'
/>
<th
scope='col' className='provice-table-header sort-table-th'
style={{ minWidth: 140 }}
>
สัดส่วน
</th>
</tr>
</thead>
<tbody>
<tr className='text-sec' style={{ backgroundColor: '#333' }}>
<td className='text-left'>
<b>ทั้งประเทศ</b>
</td>
<td>
{national_sum['total_doses'].toLocaleString()}
</td>
<td>
{national_sum['AstraZeneca'].toLocaleString()}
</td>
<td>
{national_sum['Sinovac'].toLocaleString()}
</td>
<td>
{national_sum['Pfizer'].toLocaleString()}
</td>
<td>
{national_sum['Sinopharm'].toLocaleString()}
</td>
<td>
{national_sum['Johnson & Johnson'].toLocaleString()}
</td>
<ShareChart
shares={[
national_sum['AstraZeneca'] / national_sum['total_doses'],
national_sum['Sinovac'] / national_sum['total_doses'],
national_sum['Sinopharm'] / national_sum['total_doses'],
national_sum['Pfizer'] / national_sum['total_doses'],
national_sum['Johnson & Johnson'] / national_sum['total_doses']
]}
/>
</tr>
{provincesData && provincesData.map((province, index) => {
if (index < (showAll ? provincesData.length : 10) && province.id !== '0') {
return (
<tr key={index} className='text-sec'>
<td className='text-left'>
<b>{province.province}</b>
</td>
<td className='col-spacing'>
{province['total_doses'].toLocaleString()}
</td>
<td>
{province['AstraZeneca'].toLocaleString()}
</td>
<td>
{province['Sinovac'].toLocaleString()}
</td>
<td>
{province['Pfizer'].toLocaleString()}
</td>
<td>
{province['Sinopharm'].toLocaleString()}
</td>
<td className='col-spacing'>
{province['Johnson & Johnson'].toLocaleString()}
</td>
<ShareChart
shares={[
province['AstraZeneca-share'],
province['Sinovac-share'],
province['Sinopharm-share'],
province['Pfizer-share'],
province['JnJ-share']
]}
/>
</tr>
)
}
})
}
</tbody>
</table>
</div>
<button onClick={() => setShowAll(!showAll)} className='rounded table-toggle'>{showAll ? 'ย่อข้อมูล' : 'ดูทั้งหมด'}</button>
</div>
)
}
Example #5
| Source File: supplyTable.tsx From the-researcher-covid-tracker with GNU General Public License v3.0 | 4 votes |
|
export default function SupplyTable(props) {
const [showAll, setShowAll] = useState<boolean>(false)
const [isDescSort, setIsDescSort] = useState(true)
const [sortData, setSortData] = useState({
column: 'reported_supply',
direction: 'down'
})
var vaccination_by_manufacturer = props.province_vaccine_manufacturer.data
var province_vaccination = props.province_vaccination.data
var allocation_data = props.province_allocation
allocation_data.map((province, index) => {
const mf_data = _.find(vaccination_by_manufacturer, { 'province': province['province'] })
const vaccination_data = _.find(province_vaccination, { 'province': province['province'] })
const reported_supply = Number(province['delivered_total'])
if (mf_data) {
const reported_doses_used = mf_data["Sinovac"] + mf_data["AstraZeneca"] + mf_data["Pfizer"]
allocation_data[index]['reported_supply'] = reported_supply
allocation_data[index]['reported_doses_used'] = reported_doses_used
allocation_data[index]['reported_doses_used_percentage'] = reported_doses_used / reported_supply
allocation_data[index]['total_1st_dose'] = vaccination_data['total_1st_dose']
allocation_data[index]['total_2nd_dose'] = vaccination_data['total_2nd_dose']
allocation_data[index]['1st_dose_coverage'] = vaccination_data['total_1st_dose'] / province['population']
allocation_data[index]['2nd_dose_coverage'] = vaccination_data['total_2nd_dose'] / province['population']
}
})
var national_sum = {}
national_sum['reported_supply'] = sum(allocation_data, d => d['reported_supply'])
national_sum['reported_doses_used'] = sum(allocation_data, d => d['reported_doses_used'])
national_sum['total_1st_dose'] = sum(allocation_data, d => d['total_1st_dose'])
national_sum['total_2nd_dose'] = sum(allocation_data, d => d['total_2nd_dose'])
national_sum['total_population'] = 66186727
props.setDosesRemaining(national_sum['reported_supply'] - national_sum['reported_doses_used'])
const [provincesData, setData] = useState(undefined)
function sortChange(column) {
if (column == sortData.column) {
setIsDescSort(!isDescSort)
}
setSortData({
column: column,
direction: isDescSort ? 'down' : 'up'
})
}
useEffect(() => {
allocation_data = _.sortBy(allocation_data, sortData.column)
if (sortData.direction == 'down') {
allocation_data.reverse()
}
setData(allocation_data)
}, [sortData])
return (
<div>
<h5 className='text-center'>ตารางแสดงข้อมูลการจัดสรรวัคซีนในแต่ละจังหวัดและร้อยละวัคซีนที่ใช้ไป</h5>
<p className='text-center text-sec'>ข้อมูลการจัดส่งวัคซีนและวัคซีนคงเหลือมีรายงานเฉพาะข้อมูลวัคซีนหลักของรัฐบาล (Sinovac, AstraZeneca และ Pfizer) ยังไม่รวมวัคซีนทางเลือกจากผู้ผลิตอื่น</p>
<div className='mt-4 table-responsive-xl'>
<table className="table text-white table-theme-light w-100" style={{ minWidth: 400, fontSize: '90%' }}>
<thead>
<tr>
<th className='text-left' style={{ minWidth: 150 }} scope="col">จังหวัด</th>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='reported_doses_used'
text='จำนวนวัคซีนที่ฉีดแล้ว'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='1st_dose_coverage'
text='ได้วัคซีนอย่างน้อย 1 โดส'
/>
<TableHeader
sortChange={sortChange}
sortData={sortData}
colId='2nd_dose_coverage'
text='ได้วัคซีนครบ'
/>
</tr>
</thead>
<tbody>
<tr style={{ backgroundColor: "#333" }}>
<td className='text-left'>
<b>ทั้งประเทศ</b>
</td>
<td>
{national_sum['reported_doses_used']?.toLocaleString()}
</td>
<td>
<Badge coverage={national_sum['total_1st_dose'] / national_sum['total_population']} />
</td>
<td>
<Badge coverage={national_sum['total_2nd_dose'] / national_sum['total_population']} />
</td>
</tr>
{provincesData && provincesData.map((province, index) => {
if (index < (showAll ? provincesData.length : 10) && province.id !== '0') {
return (
<tr key={index} className='text-sec'>
<td className='text-left'>
<b>{province.province}</b>
</td>
<td>
{province['reported_doses_used']?.toLocaleString()}
</td>
<td>
<Badge coverage={province['1st_dose_coverage']} />
</td>
<td>
<Badge coverage={province['2nd_dose_coverage']} />
</td>
</tr>
)
}
})
}
</tbody>
</table>
</div>
<button onClick={() => setShowAll(!showAll)} className='rounded table-toggle'>{showAll ? 'ย่อข้อมูล' : 'ดูทั้งหมด'}</button>
</div>
)
}
