Skip to content

Commit 6de0665

Browse files
theiliadtheiliad
committed
fix(core): Fix tooltip positioning and clean up styling
1 parent 2d47bb4 commit 6de0665

File tree

4 files changed

+21
-34
lines changed

4 files changed

+21
-34
lines changed

Diff for: ‎packages/core/demo/index.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
8787
</div>
8888

8989
<!-- Combo Chart -->
90-
<!-- <div class="chart-holder has-actions" id="classy-combo-chart-holder"></div>
90+
<!-- <div class="demo-chart-holder has-actions" id="classy-combo-chart-holder"></div>
9191
<div class="chart-demo-actions" id="actions-combo">
9292
<div class="btn-group--lg" role="group" aria-label="Options for changing data">
9393
<button id="change-data-combo" class="btn--primary" type="button">Change Data</button>
@@ -105,7 +105,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
105105
</div> -->
106106

107107
<!-- Donut Chart -->
108-
<div class="chart-holder has-actions" id="classy-donut-chart-holder"></div>
108+
<div class="demo-chart-holder has-actions" id="classy-donut-chart-holder"></div>
109109
<div class="chart-demo-actions" id="actions-donut" role="region" aria-label="Donut chart actions">
110110
<button class="bx--btn bx--btn--primary" id="change-data-donut" type="button">
111111
Update Data
@@ -117,7 +117,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
117117
</div>
118118

119119
<!-- Bar Chart -->
120-
<div class="chart-holder has-actions" id="classy-grouped-bar-chart-holder"></div>
120+
<div class="demo-chart-holder has-actions" id="classy-grouped-bar-chart-holder"></div>
121121
<div class="chart-demo-actions" id="actions-grouped-bar" role="region" aria-label="Grouped bar chart actions">
122122
<button class="bx--btn bx--btn--primary" id="change-data-grouped-bar" type="button">
123123
Update Data
@@ -129,7 +129,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
129129
</div>
130130

131131
<!-- Pie Chart -->
132-
<div class="chart-holder has-actions" id="classy-pie-chart-holder"></div>
132+
<div class="demo-chart-holder has-actions" id="classy-pie-chart-holder"></div>
133133
<div class="chart-demo-actions" id="actions-pie" role="region" aria-label="Pie chart actions">
134134
<button class="bx--btn bx--btn--primary" id="change-data-pie" type="button">
135135
Update Data
@@ -140,7 +140,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
140140
</button>
141141
</div>
142142

143-
<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
143+
<div class="demo-chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
144144
<div class="chart-demo-actions" id="actions-simple-bar-accessible" role="region" aria-label="Simple accessible bar chart actions">
145145
<button class="bx--btn bx--btn--primary" id="change-data-simple-bar-accessible" type="button">
146146
Update Data
@@ -151,7 +151,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
151151
</button>
152152
</div>
153153

154-
<div class="chart-holder has-actions" id="classy-stacked-bar-chart-holder"></div>
154+
<div class="demo-chart-holder has-actions" id="classy-stacked-bar-chart-holder"></div>
155155
<div class="chart-demo-actions" id="actions-stacked-bar" role="region" aria-label="Stacked bar chart actions">
156156
<button class="bx--btn bx--btn--primary" id="change-data-stacked-bar" type="button">
157157
Update Data
@@ -162,7 +162,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
162162
</button>
163163
</div>
164164

165-
<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
165+
<div class="demo-chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
166166
<div class="chart-demo-actions" id="actions-simple-bar" role="region" aria-label="Simple bar chart actions">
167167
<button class="bx--btn bx--btn--primary" id="change-data-simple-bar" type="button">
168168
Update Data
@@ -173,7 +173,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
173173
</button>
174174
</div>
175175

176-
<div class="chart-holder has-actions" id="classy-stacked-bar-accessible-chart-holder"></div>
176+
<div class="demo-chart-holder has-actions" id="classy-stacked-bar-accessible-chart-holder"></div>
177177
<div class="chart-demo-actions" id="actions-stacked-bar-accessible" role="region" aria-label="Stacked accessible bar chart actions">
178178
<button class="bx--btn bx--btn--primary" id="change-data-stacked-bar-accessible" type="button">
179179
Update Data
@@ -185,7 +185,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
185185
</div>
186186

187187
<!-- Line Chart -->
188-
<div class="chart-holder has-actions" id="classy-curved-line-chart-holder"></div>
188+
<div class="demo-chart-holder has-actions" id="classy-curved-line-chart-holder"></div>
189189
<div class="chart-demo-actions" id="actions-curved-line" role="region" aria-label="Curved line chart actions">
190190
<button class="bx--btn bx--btn--primary" id="change-data-curved-line" type="button">
191191
Update Data
@@ -196,7 +196,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
196196
</button>
197197
</div>
198198

199-
<div class="chart-holder has-actions" id="classy-line-chart-holder"></div>
199+
<div class="demo-chart-holder has-actions" id="classy-line-chart-holder"></div>
200200
<div class="chart-demo-actions" id="actions-line" role="region" aria-label="Line chart actions">
201201
<button class="bx--btn bx--btn--primary" id="change-data-line" type="button">
202202
Update Data
@@ -207,7 +207,7 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
207207
</button>
208208
</div>
209209

210-
<div class="chart-holder has-actions" id="classy-line-step-chart-holder"></div>
210+
<div class="demo-chart-holder has-actions" id="classy-line-step-chart-holder"></div>
211211
<div class="chart-demo-actions" id="actions-line-step" role="region" aria-label="Step chart actions">
212212
<button class="bx--btn bx--btn--primary" id="change-data-line-step" type="button">
213213
Update Data

Diff for: ‎packages/core/demo/index.scss

+1-23
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,7 @@ header.m-demo-header {
133133
}
134134
}
135135

136-
.resizable {
137-
resize: both;
138-
}
139-
.demo-title {
140-
margin-top: 20px;
141-
}
142-
.chart-holder {
136+
.demo-chart-holder {
143137
background-color: #fff;
144138
box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1);
145139
margin: 0 auto 60px auto;
@@ -148,7 +142,6 @@ header.m-demo-header {
148142
min-width: 300px;
149143
max-width: 800px;
150144
padding: 30px;
151-
position: relative;
152145
transition: box-shadow .1s ease-out;
153146
overflow: hidden;
154147
resize: both;
@@ -188,21 +181,6 @@ header.m-demo-header {
188181
}
189182
}
190183

191-
.chart-title {
192-
display: block;
193-
font-size: 16px;
194-
font-weight: bold;
195-
}
196-
197-
#classy-bar-chart-holder {
198-
overflow: hidden;
199-
resize: both;
200-
}
201-
202-
div#carbon-charts-patterns svg {
203-
height: 0;
204-
}
205-
206184
div.experimental-switch {
207185
display: table;
208186
width: 100%;

Diff for: ‎packages/core/src/base-chart.ts

+3
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@ export class BaseChart {
7878
const holderElement = this.holder as HTMLElement;
7979
const { width, height } = this.options;
8080

81+
// Add class to chart holder
82+
select(this.holder).classed("chart-holder", true);
83+
8184
// If width exists in options
8285
if (width) {
8386
// Apply formatted width attribute to chart

Diff for: ‎packages/core/src/style.scss

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ $default_transition: all .1s ease-out;
66
font-family: "IBM Plex Sans", Arial, sans-serif;
77
}
88

9+
div.chart-holder {
10+
position: relative;
11+
}
12+
913
// TODO - Nest all styles into the "chart-wrapper class
1014
.chart-wrapper {
1115
width: 100%;
@@ -273,3 +277,5 @@ div.chart-overlay {
273277
#carbon-charts-patterns svg {
274278
height: 0;
275279
}
280+
281+

0 commit comments

Comments
 (0)