Skip to content

Commit

Permalink
add function explo widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtzy
holtzy committed Jul 16, 2024
1 parent 9efe856 commit cf0f2fc
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 76 deletions.
15 changes: 9 additions & 6 deletions src/components/CodeChunk.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from "react";
import Prism from "../prism/prism";
import "../prism/prism.css";
import React from 'react';
import Prism from '../prism/prism';
import '../prism/prism.css';

export default function CodeChunk({ children }) {
export default function CodeChunk({ children, hasWhiteBackground = false }) {
React.useEffect(() => {
Prism.highlightAll();
}, []);

return (
<div>
<pre>
<pre style={{ backgroundColor: hasWhiteBackground ? 'white' : '' }}>
<code
style={{ outline: "0px solid transparent" }}
style={{
outline: '0px solid transparent',
backgroundColor: hasWhiteBackground ? 'white' : '',
}}
className={`language-javascript`}
>
{children}
Expand Down
97 changes: 61 additions & 36 deletions src/components/FunctionExploration.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Link } from "gatsby";
import React, { useState } from "react";
import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
import ToggleButton from "react-bootstrap/ToggleButton";
import { functionDescriptions } from "../util/functionDescriptions";
import "./functionExploration.css";
import { Link } from 'gatsby';
import React, { useState } from 'react';
import { functionDescriptions } from '../util/functionDescriptions';
import { Button, Col, Row } from 'react-bootstrap';
import ChartImage from './ChartImage';

import './functionExploration.css';

const capitalize = (s) => {
if (typeof s !== "string") return "";
if (typeof s !== 'string') return '';
return s.charAt(0).toUpperCase() + s.slice(1);
};

Expand All @@ -18,49 +19,73 @@ export default function FunctionExploration({ functionName }) {
const [selectedParameter, setSelectedParameter] = useState(
functionInfo.parameters[0].name
);
const [someString, setSomeString] = useState("hello");

const selectedParameterInfo = functionInfo.parameters.filter(
(param) => param.name === selectedParameter
)[0];

const argumentButtons = (
<div>
{functionInfo.parameters.map((item, i) => (
<Button
key={i}
value={item.name}
size="sm"
onClick={() => setSelectedParameter(item.name)}
>
{item.name}
</Button>
))}
</div>
);

return (
<>
<h2 id={capitalize(functionName + "()" + " details")}>
<div style={{ marginBottom: 70 }}>
<h2 id={capitalize(functionName + '()' + ' details')}>
&#128270; <code>{functionName}</code> function parameters
<a
style={{ marginLeft: "15px", fontSize: "14px" }}
style={{ marginLeft: '15px', fontSize: '14px' }}
href={functionInfo.docUrl}
>
&rarr; see full doc
</a>
</h2>

<ToggleButtonGroup
type="radio"
size="sm"
name="functionParameter"
value={selectedParameter}
onChange={(value) => setSelectedParameter(value)}
<h3>&rarr; Description</h3>
<p>{functionInfo.description}</p>

<div
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'start',
alignItems: 'baseline',
gap: 14,
}}
>
{functionInfo.parameters.map((item, i) => (
<ToggleButton
key={i}
// variant="secondary"
className={"functionButton"}
id={`functionParameter-${item.name}`}
value={item.name}
>
{item.name}
</ToggleButton>
))}
</ToggleButtonGroup>
<div>
<code>string</code>
<span>&rarr; {selectedParameterInfo.description}</span>
<h3 style={{ width: 'auto' }}>&rarr; Arguments</h3>
{argumentButtons}
</div>
{/* <div style={{ paddingLeft: "6px", fontSize: "14px" }}><Link to={selectedParameterInfo.relatedChart}>check a chart using it</Link></div> */}
<br />
<br />
</>

<Row>
<Col md={8}>
<div style={{ fontSize: 16 }}>
<p className="little-pill">Description</p>
<p className="little-text">{selectedParameterInfo.description}</p>
<p className="little-pill">Type</p>
<p className="little-text">{selectedParameterInfo.type}</p>
<p className="little-pill">Code Example</p>
<div style={{ fontSize: 12, backgroundColor: 'white' }}>
{selectedParameterInfo.basicUsage}
</div>
</div>
</Col>
<Col md={4}>
<Link to={'/' + selectedParameterInfo.post}>
<ChartImage imgName={selectedParameterInfo.img} caption="TODO" />
</Link>
</Col>
</Row>
</div>
);
}
22 changes: 9 additions & 13 deletions src/components/functionExploration.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@

.functionButton {
border-width: 1px !important;
border-radius: 3px !important;
padding: 1px 7px;
.little-pill {
margin: 0px;
padding: 0px;
color: grey;
font-size: 12px;
}

/* Hack for a bootstrap issue, which causes the !important on the .btn class to override
this :checked selector - this selector and css is copied from the bootstrap css, with !important
appended to each rule to ensure that it overrides the .btn class */
.btn-check:checked + .btn {
color: var(--bs-btn-active-color) !important;
background-color: var(--bs-btn-active-bg) !important;
border-color: var(--bs-btn-active-border-color) !important;
}
.little-text {
font-size: 16px;
line-height: 1.4;
}
133 changes: 112 additions & 21 deletions src/util/functionDescriptions.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,115 @@
import React from 'react';
import CodeChunk from '../components/CodeChunk';

export const functionDescriptions = {
kdeplot: {
description: '',
docUrl: 'https://seaborn.pydata.org/generated/seaborn.kdeplot.html',
basicUsage: '',
parameters: [
{ name: "fill", description: 'color under the curve', type: 'boolean', relatedChart: '70_deffffed' },
{ name: "bw", description: 'control how density is computed', type: 'boolean', relatedChart: '70_deffffed' },
{ name: "color", description: 'control the color', type: 'boolean', relatedChart: '70_deffffed' }
]
},
violin: {
description: '',
docUrl: 'https://seaborn.pydata.org/generated/seaborn.violinplot.html',
basicUsage: '',
parameters: [
{ name: "width", description: 'color under the curve', type: 'boolean', relatedChart: '70_deffffed' },
{ name: "bw", description: 'control how density is computed', type: 'boolean', relatedChart: '70_deffffed' },
{ name: "color", description: 'controls the color', type: 'string', relatedChart: '70_deffffed' }
]
}
}
kdeplot: {
description: (
<>
<p>
The <code>kdeplot()</code> function of{' '}
<a href="https://python-graph-gallery.com/seaborn/">seaborn</a>{' '}
generates Kernel Density Estimates to depict the probability density
function of a continuous variable. It outputs a smoothed curve
representing the distribution of the data.
</p>
</>
),
docUrl: 'https://seaborn.pydata.org/generated/seaborn.kdeplot.html',
basicUsage: (
<CodeChunk>
{`
# library
import seaborn as sns
# Data
df = sns.load_dataset('iris')
# Default density plot
sns.kdeplot(df['sepal_width'])
`.trim()}
</CodeChunk>
),
// PARAMETERS
parameters: [
////////////////////////////////////////////////////////////////////////
{
name: 'fill',
description: (
<p>
<code>fill</code> controls the color under the curve.
</p>
),
basicUsage: (
<CodeChunk hasWhiteBackground>
{`
sns.kdeplot(df['sepal_width'], color="purple")
`.trim()}
</CodeChunk>
),
type: (
<p>
A string that provides the desired color. You can provide a name,
some rgb, some hsl. Read this post to know more.
</p>
),
img: '70_Basic_density_plot_Seaborn',
post: '70-basic-density-plot-with-seaborn',
},
////////////////////////////////////////////////////////////////////////
{
name: 'bw',
description: (
<p>
<code>bw</code> controls this amazing things
</p>
),
basicUsage: (
<CodeChunk hasWhiteBackground>
{`
sns.kdeplot(df['sepal_width'], bw=72)
`.trim()}
</CodeChunk>
),
type: <p>I think it's a number but I'm not sure</p>,
img: '73_Control_bandwidth_densityplot_Seaborn1',
post: '70-basic-density-plot-with-seaborn',
},
],
},
//
//
//
//
//
// VIOLIN
//
//
//
//
//
violin: {
description: '',
docUrl: 'https://seaborn.pydata.org/generated/seaborn.violinplot.html',
basicUsage: '',
parameters: [
{
name: 'width',
description: 'color under the curve',
type: 'boolean',
relatedChart: '70_deffffed',
},
{
name: 'bw',
description: 'control how density is computed',
type: 'boolean',
relatedChart: '70_deffffed',
},
{
name: 'color',
description: 'controls the color',
type: 'string',
relatedChart: '70_deffffed',
},
],
},
};

0 comments on commit cf0f2fc

Please sign in to comment.