diff --git a/R/industry_flow.R b/R/industry_flow.R
index 51b6712..972e37f 100644
--- a/R/industry_flow.R
+++ b/R/industry_flow.R
@@ -6,171 +6,171 @@
sankey_chart <- function(subjectinput, sexinput, qualinput) {
cohort_sankey1 <- cohort1 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey2 <- cohort2 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey1 <- na.omit(cohort_sankey1)
cohort_sankey2 <- na.omit(cohort_sankey2)
-
+
# Choose top 9 SIC section names and label all others as 'OTHER' based on counts for 1 YAG
-
+
section_names1 <- cohort_sankey1 %>%
group_by(SECTIONNAME.x) %>%
dplyr::summarise(count = sum(count)) %>%
arrange(., -count)
-
+
section_names2 <- cohort_sankey1 %>%
group_by(SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count)) %>%
arrange(., -count)
-
+
section_names <- section_names1 %>%
full_join(section_names2, by = c("SECTIONNAME.x" = "SECTIONNAME.y"))
section_names$count.x[is.na(section_names$count.x) == TRUE] <- 0
section_names$count.y[is.na(section_names$count.y) == TRUE] <- 0
section_names$count <- section_names$count.x + section_names$count.y
-
+
section_names <- section_names[, -c(2, 3)] %>%
arrange(., -count)
-
+
section_names$ID <- 1:nrow(section_names)
section_names$SECTIONNAME_NEW <- section_names$SECTIONNAME.x
section_names$SECTIONNAME_NEW[section_names$ID > 9] <- "Other"
-
+
names(section_names) <- c("old", "count", "ID", "new")
-
+
# re-calculate counts using new section names variable
-
+
cohort_sankey1 <- cohort_sankey1 %>%
left_join(section_names, by = c("SECTIONNAME.x" = "old"))
cohort_sankey1$SECTIONNAME.x <- cohort_sankey1$new
cohort_sankey1 <- cohort_sankey1[, -c(10, 11, 12)]
-
+
cohort_sankey1 <- cohort_sankey1 %>%
left_join(section_names, by = c("SECTIONNAME.y" = "old"))
cohort_sankey1$SECTIONNAME.y <- cohort_sankey1$new
cohort_sankey1 <- cohort_sankey1[, -c(10, 11, 12)]
-
+
# The following line had disappeared from my branch compared to main branch.
# I didn't mean to delete it and assuming no-one else has been on the branch,
# so assuming it was an accidental deletion.
cohort_sankey1$SECTIONNAME.y[is.na(cohort_sankey1$SECTIONNAME.y) == TRUE] <- "Other"
-
+
cohort_sankey1 <- cohort_sankey1 %>%
group_by(sex.x, subject_name.x, YAG.x, SECTIONNAME.x, YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count.x)) %>%
arrange(., -count)
-
+
# re-calculate counts using new section names variable
-
+
cohort_sankey2 <- cohort_sankey2 %>%
left_join(section_names, by = c("SECTIONNAME.x" = "old"))
cohort_sankey2$SECTIONNAME.x <- cohort_sankey2$new
cohort_sankey2 <- cohort_sankey2[, -c(10, 11, 12)]
-
+
cohort_sankey2 <- cohort_sankey2 %>%
left_join(section_names, by = c("SECTIONNAME.y" = "old"))
cohort_sankey2$SECTIONNAME.y <- cohort_sankey2$new
cohort_sankey2 <- cohort_sankey2[, -c(10, 11, 12)]
-
+
cohort_sankey2$SECTIONNAME.y[is.na(cohort_sankey2$SECTIONNAME.y) == TRUE] <- "Other"
cohort_sankey2$SECTIONNAME.x[is.na(cohort_sankey2$SECTIONNAME.x) == TRUE] <- "Other"
-
+
cohort_sankey2 <- cohort_sankey2 %>%
group_by(sex.x, subject_name.x, YAG.x, SECTIONNAME.x, YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count.x)) %>%
arrange(., -count)
-
+
# Now name nodes
-
+
nodes <- data.frame("name" = c(
unique(cohort_sankey1$SECTIONNAME.x),
unique(c(cohort_sankey1$SECTIONNAME.y, cohort_sankey2$SECTIONNAME.x)),
unique(cohort_sankey2$SECTIONNAME.y)
))
-
+
nodes$ID <- 0:(nrow(nodes) - 1)
-
+
# View nodes and separate into 3 sections to join the ID numbers into links.
-
+
nodes1 <- nodes[1:length(unique(cohort_sankey1$SECTIONNAME.x)), ]
nodes2 <- nodes[(length(unique(cohort_sankey1$SECTIONNAME.x)) + 1):((length(unique(cohort_sankey1$SECTIONNAME.x))) + length(unique(c(cohort_sankey1$SECTIONNAME.y, cohort_sankey2$SECTIONNAME.x)))), ]
nodes3 <- nodes[((length(unique(cohort_sankey1$SECTIONNAME.x))) + length(unique(c(cohort_sankey1$SECTIONNAME.y, cohort_sankey2$SECTIONNAME.x))) + 1):nrow(nodes), ]
-
+
# Create links for 1-3 YAG ------------------------------------------------
-
+
links1 <- as.data.frame(
cohort_sankey1[, c(4, 6, 7)],
byrow = TRUE, ncol = 3
)
-
+
names(links1) <- c("source", "target", "value")
-
+
# Change names in links to numbers
-
+
links1 <- links1 %>%
left_join(nodes1, by = c("source" = "name"))
links1$source <- links1$ID
links1 <- links1[, -4]
-
+
links1 <- links1 %>%
left_join(nodes2, by = c("target" = "name"))
links1$target <- links1$ID
links1 <- links1[, -4]
-
-
+
+
# Create links for 3-5 YAG ------------------------------------------------
-
+
links2 <- as.data.frame(
cohort_sankey2[, c(4, 6, 7)],
byrow = TRUE, ncol = 3
)
-
+
names(links2) <- c("source", "target", "value")
-
+
# Change names in links to numbers
-
+
links2 <- links2 %>%
left_join(nodes2, by = c("source" = "name"))
links2$source <- links2$ID
links2 <- links2[, -4]
-
+
links2 <- links2 %>%
left_join(nodes3, by = c("target" = "name"))
links2$target <- links2$ID
links2 <- links2[, -4]
-
-
+
+
# join the 2 links together
-
+
links <- links1 %>%
full_join(links2)
-
+
links <- links %>%
mutate_at(
"value",
funs(ifelse(!is.na(as.numeric(.)), round_any(as.numeric(.), 5), .))
)
-
+
# Force a space between node names and values
nodes$name <- paste(nodes$name, " ")
-
+
plot <- sankeyNetwork(
Links = links, Nodes = nodes,
Source = "source", Target = "target",
Value = "value", NodeID = "name", fontSize = 10, nodePadding = 20
)
-
+
return(plot)
}
sankey_title <- function(subjectinput, sexinput, qualinput) {
ifelse(subjectinput == "All",
- subjecttext <- "all subjects",
- subjecttext <- subjectinput
+ subjecttext <- "all subjects",
+ subjecttext <- subjectinput
)
-
+
if (sexinput == "F") {
sextext <- "female"
} else if (sexinput == "M") {
@@ -178,11 +178,11 @@ sankey_title <- function(subjectinput, sexinput, qualinput) {
} else {
sextext <- "male and female"
}
-
-
+
+
sankey_title <- paste("Industry of graduate employment for 2012/13 academic year graduates of", subjecttext, "one, three and five years after
graduation (YAG), ", sextext, tolower(qualinput), "graduates from English HEIs, APs and FECs, 2018/19 tax year
")
-
+
return(sankey_title)
}
@@ -192,13 +192,13 @@ sankey_title <- function(subjectinput, sexinput, qualinput) {
sankey_table <- function(subjectinput, sexinput, qualinput) {
cohort_sankey1 <- cohort1 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey2 <- cohort2 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey1 <- na.omit(cohort_sankey1)
cohort_sankey2 <- na.omit(cohort_sankey2)
-
+
# quick table code
# 1 YAG
one_yag_table <- cohort_sankey1 %>%
@@ -206,46 +206,46 @@ sankey_table <- function(subjectinput, sexinput, qualinput) {
dplyr::summarise(count = sum(count))
one_yag_table <- one_yag_table %>%
mutate("1 YAG" = count / sum(count))
-
+
# 3 YAG
three_yag_table <- cohort_sankey2 %>%
group_by(YAG.x, SECTIONNAME.x) %>%
dplyr::summarise(count = sum(count))
three_yag_table <- three_yag_table %>%
mutate("3 YAG" = count / sum(count))
-
+
# 5 YAG
five_yag_table <- cohort_sankey2 %>%
group_by(YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count))
five_yag_table <- five_yag_table %>%
mutate("5 YAG" = count / sum(count))
-
-
+
+
# create table
# join
yag_table <- one_yag_table %>%
left_join(three_yag_table, by = c("SECTIONNAME.x" = "SECTIONNAME.x"))
-
+
yag_table <- yag_table %>%
left_join(five_yag_table, by = c("SECTIONNAME.x" = "SECTIONNAME.y"))
-
+
yag_table[is.na(yag_table)] <- 0
-
+
# quick check - should all be one
sum(yag_table$`1 YAG`)
sum(yag_table$`3 YAG`)
sum(yag_table$`5 YAG`)
-
+
# remove columns
yag_table_final <- yag_table[, c("SECTIONNAME.x", "1 YAG", "3 YAG", "5 YAG")]
-
+
yag_table_final <- yag_table_final %>%
arrange(., -`1 YAG`)
-
+
names(yag_table_final) <- c("INDUSTRY", "1 YAG", "3 YAG", "5 YAG")
-
-
+
+
orange_pal <- function(x) {
if (!is.na(x)) {
rgb(colorRamp(c("#F7FBFF", "#2F75B5"))(x), maxColorValue = 255)
@@ -253,7 +253,7 @@ sankey_table <- function(subjectinput, sexinput, qualinput) {
"#e9e9e9" # grey
}
}
-
+
# function which returns background colour based on cell value (using colour map)
# also takes column name as an input, which allows to get max and min
stylefunc <- function(value, index, name) {
@@ -262,21 +262,21 @@ sankey_table <- function(subjectinput, sexinput, qualinput) {
color <- orange_pal(normalized)
list(background = color)
}
-
+
# list giving column formatting (using style function) for single column
-
+
coldefs <- list(
INDUSTRY = colDef(na = "c", name = "Industry", width = 600, footer = "TOTAL (N)"),
`1 YAG` = colDef(na = "c", style = stylefunc, format = colFormat(percent = TRUE, digits = 1), footer = format(round_any(sum(yag_table$count.x), 5), big.mark = ",", scientific = FALSE)),
`3 YAG` = colDef(na = "c", style = stylefunc, format = colFormat(percent = TRUE, digits = 1), footer = format(round_any(sum(yag_table$count.y), 5), big.mark = ",", scientific = FALSE)),
`5 YAG` = colDef(na = "c", style = stylefunc, format = colFormat(percent = TRUE, digits = 1), footer = format(round_any(sum(yag_table$count), 5), big.mark = ",", scientific = FALSE))
)
-
-
+
+
# create table
sankey_table <- reactable(yag_table_final,
- defaultPageSize = 21, columns = coldefs, showSortable = TRUE,
- defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
+ defaultPageSize = 21, columns = coldefs, showSortable = TRUE,
+ defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
)
}
@@ -288,24 +288,24 @@ sankeytext1 <- function(subjectinput, sexinput, qualinput) {
if (sexinput == "F+M") {
sextext <- "both female and male"
}
-
+
if (sexinput == "F") {
sextext <- "female"
}
-
+
if (sexinput == "M") {
sextext <- "male"
}
-
+
cohort_sankey1 <- cohort1 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey2 <- cohort2 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey1 <- na.omit(cohort_sankey1)
cohort_sankey2 <- na.omit(cohort_sankey2)
-
+
# quick table code
# 1 YAG
one_yag_table <- cohort_sankey1 %>%
@@ -313,84 +313,84 @@ sankeytext1 <- function(subjectinput, sexinput, qualinput) {
dplyr::summarise(count = sum(count))
one_yag_table <- one_yag_table %>%
mutate("1 YAG" = count / sum(count))
-
+
# 3 YAG
three_yag_table <- cohort_sankey1 %>%
group_by(YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count))
three_yag_table <- three_yag_table %>%
mutate("3 YAG" = count / sum(count))
-
+
# 5 YAG
five_yag_table <- cohort_sankey2 %>%
group_by(YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count))
five_yag_table <- five_yag_table %>%
mutate("5 YAG" = count / sum(count))
-
-
+
+
# create table
# join
yag_table <- one_yag_table %>%
left_join(three_yag_table, by = c("SECTIONNAME.x" = "SECTIONNAME.y"))
-
+
yag_table <- yag_table %>%
left_join(five_yag_table, by = c("SECTIONNAME.x" = "SECTIONNAME.y"))
-
+
yag_table[is.na(yag_table)] <- 0
-
+
# quick check - should all be one
sum(yag_table$`1 YAG`)
sum(yag_table$`3 YAG`)
sum(yag_table$`5 YAG`)
-
+
# remove columns
yag_table_final <- yag_table[, c("SECTIONNAME.x", "1 YAG", "3 YAG", "5 YAG")]
-
+
yag_table_final <- yag_table_final %>%
arrange(., -`1 YAG`)
-
+
yag_table_final$`1 YAG` <- readr::parse_number(scales::percent(yag_table_final$`1 YAG`, accuracy = 0.1))
yag_table_final$`3 YAG` <- readr::parse_number(scales::percent(yag_table_final$`3 YAG`, accuracy = 0.1))
yag_table_final$`5 YAG` <- readr::parse_number(scales::percent(yag_table_final$`5 YAG`, accuracy = 0.1))
-
+
five_yag_table_subject <- yag_table_final %>%
arrange(., -`5 YAG`)
-
+
ifelse(subjectinput == "All",
- sankeytext1 <- paste("For ", sextext, ", ", tolower(qualinput), " graduates of all subjects, the industry with the highest
+ sankeytext1 <- paste("For ", sextext, ", ", tolower(qualinput), " graduates of all subjects, the industry with the highest
proportion of graduates one year after graduation is ", first(yag_table_final$SECTIONNAME.x),
- " (", first(yag_table_final$`1 YAG`), "%), and at five years after graduation it is ",
- ifelse(first(five_yag_table_subject$SECTIONNAME.x) == first(yag_table_final$SECTIONNAME.x),
- "the same",
- first(five_yag_table_subject$SECTIONNAME.x)
- ), " (", first(five_yag_table_subject$`5 YAG`), "%).",
- sep = ""
- ),
- sankeytext1 <- paste(
- "For ", sextext, ", ", tolower(qualinput), " graduates who studied", subjectinput, ", the industry with the highest
+ " (", first(yag_table_final$`1 YAG`), "%), and at five years after graduation it is ",
+ ifelse(first(five_yag_table_subject$SECTIONNAME.x) == first(yag_table_final$SECTIONNAME.x),
+ "the same",
+ first(five_yag_table_subject$SECTIONNAME.x)
+ ), " (", first(five_yag_table_subject$`5 YAG`), "%).",
+ sep = ""
+ ),
+ sankeytext1 <- paste(
+ "For ", sextext, ", ", tolower(qualinput), " graduates who studied", subjectinput, ", the industry with the highest
proportion of graduates one year after graduation is ", first(yag_table_final$SECTIONNAME.x),
- " (", first(yag_table_final$`1 YAG`), "%), and at five years after graduation it is ",
- ifelse(first(five_yag_table_subject$SECTIONNAME.x) == first(yag_table_final$SECTIONNAME.x),
- "the same",
- first(five_yag_table_subject$SECTIONNAME.x)
- ), " (", first(five_yag_table_subject$`5 YAG`), "%)."
- )
+ " (", first(yag_table_final$`1 YAG`), "%), and at five years after graduation it is ",
+ ifelse(first(five_yag_table_subject$SECTIONNAME.x) == first(yag_table_final$SECTIONNAME.x),
+ "the same",
+ first(five_yag_table_subject$SECTIONNAME.x)
+ ), " (", first(five_yag_table_subject$`5 YAG`), "%)."
+ )
)
-
+
return(sankeytext1)
}
sankeytext2 <- function(subjectinput, sexinput, qualinput) {
cohort_sankey1 <- cohort1 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey2 <- cohort2 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, qualification_TR.x == qualinput)
-
+
cohort_sankey1 <- na.omit(cohort_sankey1)
cohort_sankey2 <- na.omit(cohort_sankey2)
-
+
# quick table code
# 1 YAG
one_yag_table <- cohort_sankey1 %>%
@@ -398,105 +398,105 @@ sankeytext2 <- function(subjectinput, sexinput, qualinput) {
dplyr::summarise(count = sum(count))
one_yag_table <- one_yag_table %>%
mutate("1 YAG" = count / sum(count))
-
+
# 3 YAG
three_yag_table <- cohort_sankey1 %>%
group_by(YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count))
three_yag_table <- three_yag_table %>%
mutate("3 YAG" = count / sum(count))
-
+
# 5 YAG
five_yag_table <- cohort_sankey2 %>%
group_by(YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count))
five_yag_table <- five_yag_table %>%
mutate("5 YAG" = count / sum(count))
-
+
# Choose top 9 SIC section names and label all others as 'OTHER' based on counts for 1 YAG
-
+
section_names1 <- cohort_sankey1 %>%
group_by(SECTIONNAME.x) %>%
dplyr::summarise(count = sum(count)) %>%
arrange(., -count)
-
+
section_names2 <- cohort_sankey1 %>%
group_by(SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count)) %>%
arrange(., -count)
-
+
section_names <- section_names1 %>%
full_join(section_names2, by = c("SECTIONNAME.x" = "SECTIONNAME.y"))
section_names$count.x[is.na(section_names$count.x) == TRUE] <- 0
section_names$count.x[is.na(section_names$count.y) == TRUE] <- 0
section_names$count <- section_names$count.x + section_names$count.y
-
+
section_names <- section_names[, -c(2, 3)] %>%
arrange(., -count)
-
+
section_names$ID <- 1:nrow(section_names)
section_names$SECTIONNAME_NEW <- section_names$SECTIONNAME.x
section_names$SECTIONNAME_NEW[section_names$ID > 9] <- "Other"
-
+
names(section_names) <- c("old", "count", "ID", "new")
-
+
# re-calculate counts using new section names variable
-
+
cohort_sankey1 <- cohort_sankey1 %>%
left_join(section_names, by = c("SECTIONNAME.x" = "old"))
cohort_sankey1$SECTIONNAME.x <- cohort_sankey1$new
cohort_sankey1 <- cohort_sankey1[, -c(10, 11, 12)]
-
+
cohort_sankey1 <- cohort_sankey1 %>%
left_join(section_names, by = c("SECTIONNAME.y" = "old"))
cohort_sankey1$SECTIONNAME.y <- cohort_sankey1$new
cohort_sankey1 <- cohort_sankey1[, -c(10, 11, 12)]
-
+
cohort_sankey1$SECTIONNAME.y[is.na(cohort_sankey1$SECTIONNAME.y) == TRUE] <- "Other"
-
+
cohort_sankey1 <- cohort_sankey1 %>%
group_by(sex.x, subject_name.x, YAG.x, SECTIONNAME.x, YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count.x)) %>%
arrange(., -count)
-
+
# re-calculate counts using new section names variable
-
+
cohort_sankey2 <- cohort_sankey2 %>%
left_join(section_names, by = c("SECTIONNAME.x" = "old"))
cohort_sankey2$SECTIONNAME.x <- cohort_sankey2$new
cohort_sankey2 <- cohort_sankey2[, -c(10, 11, 12)]
-
+
cohort_sankey2 <- cohort_sankey2 %>%
left_join(section_names, by = c("SECTIONNAME.y" = "old"))
cohort_sankey2$SECTIONNAME.y <- cohort_sankey2$new
cohort_sankey2 <- cohort_sankey2[, -c(10, 11, 12)]
-
+
cohort_sankey2$SECTIONNAME.y[is.na(cohort_sankey2$SECTIONNAME.y) == TRUE] <- "Other"
cohort_sankey2$SECTIONNAME.x[is.na(cohort_sankey2$SECTIONNAME.x) == TRUE] <- "Other"
-
+
cohort_sankey2 <- cohort_sankey2 %>%
group_by(sex.x, subject_name.x, YAG.x, SECTIONNAME.x, YAG.y, SECTIONNAME.y) %>%
dplyr::summarise(count = sum(count.x)) %>%
arrange(., -count)
-
+
cohort_sankey1_text <- cohort_sankey1 %>%
filter(SECTIONNAME.x != SECTIONNAME.y) %>%
mutate_at(
"count",
funs(ifelse(!is.na(as.numeric(.)), round_any(as.numeric(.), 5), .))
)
-
+
cohort_sankey1_text$count <- prettyNum(cohort_sankey1_text$count, big.mark = ",", scientific = FALSE)
-
+
cohort_sankey2_text <- cohort_sankey2 %>%
filter(SECTIONNAME.x != SECTIONNAME.y) %>%
mutate_at(
"count",
funs(ifelse(!is.na(as.numeric(.)), round_any(as.numeric(.), 5), .))
)
-
+
cohort_sankey2_text$count <- prettyNum(cohort_sankey2_text$count, big.mark = ",", scientific = FALSE)
-
+
sankeytext2 <- paste(
"The most movement between one and three years after graduation is seen for ",
first(cohort_sankey1_text$SECTIONNAME.x), ", where ", first(cohort_sankey1_text$count),
@@ -505,7 +505,7 @@ sankeytext2 <- function(subjectinput, sexinput, qualinput) {
first(cohort_sankey2_text$count), " graduates moved to ", first(cohort_sankey2_text$SECTIONNAME.y),
"."
)
-
+
return(sankeytext2)
}
@@ -548,48 +548,48 @@ sankeytext2 <- function(subjectinput, sexinput, qualinput) {
earnings_sankey <- function(subjectinput, sexinput, earningsinput) {
cohort_earnings1 <- cohort3 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, SECTIONNAME.x == earningsinput)
-
+
# Choose top 9 SIC section names and label all others as 'OTHER' based on counts for 1 YAG
-
+
# Now name nodes
-
+
nodes <- data.frame("name" = c(
unique(cohort_earnings1$SECTIONNAME.x),
unique(cohort_earnings1$SECTIONNAME.y)
))
-
+
nodes <- na.omit(nodes)
nodes$ID <- 0:(nrow(nodes) - 1)
-
+
# View nodes and separate into sections to join the ID numbers into links.
-
+
nodes1 <- nodes[1, ]
nodes2 <- nodes[2:nrow(nodes), ]
-
+
# Create links for 1-3 YAG ------------------------------------------------
-
+
links1 <- as.data.frame(
cohort_earnings1[, c(7, 9, 10, 14)],
byrow = TRUE, ncol = 4
)
-
+
names(links1) <- c("source", "target", "value", "change")
-
+
# Change names in links to numbers
-
+
links1 <- links1 %>%
left_join(nodes1, by = c("source" = "name"))
links1$source <- links1$ID
links1 <- links1[, -5]
-
+
links1 <- links1 %>%
left_join(nodes2, by = c("target" = "name"))
links1$target <- links1$ID
links1 <- links1[, -5]
-
+
nodes$change <- as.factor(c("my_unique_group"))
my_color <- 'd3.scaleOrdinal() .domain(["positive", "negative", "my_unique_group"]) .range(["palegreen", "lightpink", "grey"])'
-
+
sankeyNetwork(
Links = links1, Nodes = nodes,
Source = "source", Target = "target",
@@ -603,11 +603,11 @@ earnings_sankey <- function(subjectinput, sexinput, earningsinput) {
earnings_table <- function(subjectinput, sexinput, earningsinput) {
cohort_earnings1 <- cohort3 %>%
filter(subject_name.x == subjectinput, sex.x == sexinput, SECTIONNAME.x == earningsinput)
-
+
total_earnings <- earnings_data %>%
filter(subject_name == subjectinput, sex == sexinput, SECTIONNAME == earningsinput)
-
-
+
+
yag_table_final2 <- cohort_earnings1[, c(
"SECTIONNAME.x", "earnings_median_1YAG", "SECTIONNAME.y",
"earnings_median_5YAG", "count", "earnings_change_average"
@@ -629,12 +629,12 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
"count",
funs(ifelse(!is.na(as.numeric(.)), round_any(as.numeric(.), 5), .))
)
-
+
yag_table_final2$earnings_change_average <- yag_table_final2$earnings_median_5YAG - yag_table_final2$earnings_median_1YAG
-
+
# reactable
-
-
+
+
orange_pal <- function(x) {
if (!is.na(x)) {
rgb(colorRamp(c("#F7FBFF", "#2F75B5"))(x), maxColorValue = 255)
@@ -642,7 +642,7 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
"#e9e9e9" # grey
}
}
-
+
# function which returns background colour based on cell value (using colour map)
# also takes column name as an input, which allows to get max and min
stylefunc <- function(value, index, name) {
@@ -651,8 +651,8 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
color <- orange_pal(normalized)
list(background = color)
}
-
-
+
+
# list giving column formatting (using style function) for single column
coldefs <- list(
colDef(
@@ -663,14 +663,14 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
format = colFormat(prefix = "£", separators = TRUE, digits = 0)
)
)
-
+
# get names of numerical cols
numcols <- c("earnings_median_1YAG", "earnings_median_5YAG")
# replicate list to required length
coldefs <- rep(coldefs, length(numcols))
# name elements of list according to cols
names(coldefs) <- numcols
-
+
coldefs$earnings_change_average <- colDef(
style = function(value) {
if (value > 0 & is.na(value) == FALSE) {
@@ -687,11 +687,11 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
na = "c",
format = colFormat(prefix = "£", separators = TRUE, digits = 0)
)
-
+
coldefs$SECTIONNAME.x <- colDef(name = "Industry", footer = paste("Total median for all grads in", earningsinput))
coldefs$SECTIONNAME.y <- colDef(name = "Industry", footer = paste("Total median for all grads in", earningsinput))
coldefs$count <- colDef(na = "c", minWidth = 25, name = "Number of graduates", format = colFormat(separators = TRUE))
-
+
YAG1_total <- total_earnings %>%
filter(YAG == 1) %>%
dplyr::select(earnings_median) %>%
@@ -699,7 +699,7 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
"earnings_median",
funs(ifelse(!is.na(as.numeric(.)), round(as.numeric(.), -2), .))
)
-
+
YAG5_total <- total_earnings %>%
filter(YAG == 5) %>%
dplyr::select(earnings_median) %>%
@@ -707,17 +707,17 @@ earnings_table <- function(subjectinput, sexinput, earningsinput) {
"earnings_median",
funs(ifelse(!is.na(as.numeric(.)), round(as.numeric(.), -2), .))
)
-
+
coldefs$earnings_median_1YAG$footer <- paste("£", format(YAG1_total, big.mark = ",", scientific = FALSE))
coldefs$earnings_median_5YAG$footer <- paste("£", format(YAG5_total, big.mark = ",", scientific = FALSE))
-
+
# create table
earnings_table <- reactable(yag_table_final2,
- defaultPageSize = 21, columns = coldefs, showSortable = TRUE,
- columnGroups = list(
- colGroup(name = "1 YAG", columns = c("SECTIONNAME.x", "earnings_median_1YAG")),
- colGroup(name = "5 YAG", columns = c("SECTIONNAME.y", "earnings_median_5YAG"))
- ),
- defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
+ defaultPageSize = 21, columns = coldefs, showSortable = TRUE,
+ columnGroups = list(
+ colGroup(name = "1 YAG", columns = c("SECTIONNAME.x", "earnings_median_1YAG")),
+ colGroup(name = "5 YAG", columns = c("SECTIONNAME.y", "earnings_median_5YAG"))
+ ),
+ defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
)
}
diff --git a/R/read_data.R b/R/read_data.R
index 45c98fc..c74bf54 100644
--- a/R/read_data.R
+++ b/R/read_data.R
@@ -13,7 +13,7 @@ read_cohort <- function(cohortfile = "data/pg_sankey_data_1_3_yag_dummy.csv") {
# Read in tables data.
read_tables_data <- function(file) {
- tables_data <- fread(file) %>% select(-V1)
+ tables_data <- fread(file) %>% select(-V1)
names(tables_data) <- c(
"X", "YAG", "subject_name", "SECTIONNAME", "sex",
"ethnicity", "current_region", "FSM", "prior_attainment",
diff --git a/tests/shinytest/testUI-current/industryBySubject_0.json b/tests/shinytest/testUI-current/industryBySubject_0.json
new file mode 100644
index 0000000..70d8e70
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_0.json
@@ -0,0 +1,668 @@
+{
+ "input": {
+ "countinput3": "sex",
+ "earningsbutton2": "Proportions",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "5"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry five years after\n graduation by the subject they studied and sex, first degree graduates from English HEIs,\n APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Agriculture, food and related studies",
+ "History and archaeology",
+ "Mathematical sciences",
+ "Economics",
+ "Chemistry",
+ "Engineering",
+ "Physics and astronomy",
+ "Celtic studies",
+ "Law",
+ "Politics",
+ "English studies",
+ "Materials and technology",
+ "Psychology",
+ "Medicine and dentistry",
+ "General, applied and forensic sciences",
+ "Biosciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Performing arts",
+ "Allied health",
+ "Languages and area studies",
+ "Combined and general studies",
+ "Education and teaching",
+ "Creative arts and design",
+ "Geography, earth and environmental studies",
+ "Computing",
+ "Sport and exercise sciences",
+ "Veterinary sciences",
+ "Nursing and midwifery",
+ "Health and social care",
+ "Sociology, social policy and anthropology",
+ "Media, journalism and communications",
+ "Philosophy and religious studies",
+ "Medical sciences",
+ "Architecture, building and planning",
+ "Business and management"
+ ],
+ "Female": [
+ 0.0409048259072351,
+ 0.0499327974031902,
+ 0.0140491466538179,
+ 0.00568052139071336,
+ 0.0623335784748814,
+ 0.00344888798721883,
+ 0.056348743438237,
+ 0.0394846955595567,
+ 0.0433393350746836,
+ 0.00923084725990921,
+ 0.0251819542007963,
+ 0.00722744909086298,
+ 0.0117414348388406,
+ 0.006238429741587,
+ 0.0569320112596049,
+ 0.0153171201785307,
+ 0.0592397230745822,
+ 0.028022214896153,
+ 0.00864757943854132,
+ 0.0323586843506708,
+ 0.00157228717064388,
+ 0.0649709634062841,
+ 0.0210990794512211,
+ 0.0378616894479243,
+ 0.018715289224761,
+ 0.0199579032789795,
+ 0.0327390764080846,
+ 0.00304313645931073,
+ 0.0359850886313494,
+ 0.0137955519488753,
+ 0.0124515000126797,
+ 0.0248015621433824,
+ 0.0652245581112266,
+ 0.0345142393426825,
+ 0.0376080947429818
+ ],
+ "Male": [
+ 0.0143900172574008,
+ 0.00953139519447763,
+ 0.0186379928315412,
+ 0.044205495818399,
+ 0.0133280233638657,
+ 0.0404619673436878,
+ 0.0542147882649675,
+ 0.0186114429842028,
+ 0.0446302933758131,
+ 0.0529403955927253,
+ 0.0489313686446303,
+ 0.0537103411655383,
+ 0.029231381919554,
+ 0.0322049648214523,
+ 0.0613832470463295,
+ 0.002389486260454,
+ 0.00193813885570158,
+ 0.0482145227664941,
+ 0.0660029204832072,
+ 0.00716845878136201,
+ 0.04975441391212,
+ 0.0040621266427718,
+ 0.00270808442851454,
+ 0.0492499668126908,
+ 0.0126377273330678,
+ 0.00884109916367981,
+ 0.0428514536041418,
+ 0.00138059206159565,
+ 0.000504447099429178,
+ 0.0309571219965485,
+ 0.00509757068896854,
+ 0.0318598168060534,
+ 0.0475507765830346,
+ 0.0243993097039692,
+ 0.0260188503916102
+ ],
+ "Female & Male": [
+ 0.0619652157738095,
+ 0.0597098214285714,
+ 0.0573846726190476,
+ 0.0541294642857143,
+ 0.0540132068452381,
+ 0.0526878720238095,
+ 0.0518275669642857,
+ 0.0418759300595238,
+ 0.0399228050595238,
+ 0.0397135416666667,
+ 0.0365745907738095,
+ 0.03369140625,
+ 0.0333426339285714,
+ 0.0315987723214286,
+ 0.031343005952381,
+ 0.030180431547619,
+ 0.0291108630952381,
+ 0.0259254092261905,
+ 0.0251581101190476,
+ 0.0251348586309524,
+ 0.0243675595238095,
+ 0.0238792782738095,
+ 0.0237630208333333,
+ 0.0227632068452381,
+ 0.0221819196428571,
+ 0.0215541294642857,
+ 0.0110444568452381,
+ 0.00930059523809524,
+ 0.0075102306547619,
+ 0.0066499255952381,
+ 0.00411551339285714,
+ 0.00230189732142857,
+ 0.00218563988095238,
+ 0.00158110119047619,
+ 0.00151134672619048
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 600
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "4.1%",
+ "5.0%",
+ "1.4%",
+ "0.6%",
+ "6.2%",
+ "0.3%",
+ "5.6%",
+ "3.9%",
+ "4.3%",
+ "0.9%",
+ "2.5%",
+ "0.7%",
+ "1.2%",
+ "0.6%",
+ "5.7%",
+ "1.5%",
+ "5.9%",
+ "2.8%",
+ "0.9%",
+ "3.2%",
+ "0.2%",
+ "6.5%",
+ "2.1%",
+ "3.8%",
+ "1.9%",
+ "2.0%",
+ "3.3%",
+ "0.3%",
+ "3.6%",
+ "1.4%",
+ "1.2%",
+ "2.5%",
+ "6.5%",
+ "3.5%",
+ "3.8%"
+ ],
+ "footer": "39,435",
+ "na": "x",
+ "style": [
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#CDDFEF"
+ },
+ {
+ "background": "#E7F0F9"
+ },
+ {
+ "background": "#3A7CB9"
+ },
+ {
+ "background": "#EEF4FB"
+ },
+ {
+ "background": "#4C88BF"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#DCE9F5"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#E2EDF7"
+ },
+ {
+ "background": "#D4E4F2"
+ },
+ {
+ "background": "#E5EFF8"
+ },
+ {
+ "background": "#4A87BF"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#4382BC"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#DEEAF5"
+ },
+ {
+ "background": "#95B9DB"
+ },
+ {
+ "background": "#F3F8FD"
+ },
+ {
+ "background": "#3277B6"
+ },
+ {
+ "background": "#B8D0E7"
+ },
+ {
+ "background": "#84AED4"
+ },
+ {
+ "background": "#BFD5EA"
+ },
+ {
+ "background": "#BBD3E9"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#EFF5FC"
+ },
+ {
+ "background": "#8AB2D6"
+ },
+ {
+ "background": "#CEDFEF"
+ },
+ {
+ "background": "#D2E2F1"
+ },
+ {
+ "background": "#ACC9E3"
+ },
+ {
+ "background": "#3176B5"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#85AFD5"
+ }
+ ]
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "1.4%",
+ "1.0%",
+ "1.9%",
+ "4.4%",
+ "1.3%",
+ "4.0%",
+ "5.4%",
+ "1.9%",
+ "4.5%",
+ "5.3%",
+ "4.9%",
+ "5.4%",
+ "2.9%",
+ "3.2%",
+ "6.1%",
+ "0.2%",
+ "0.2%",
+ "4.8%",
+ "6.6%",
+ "0.7%",
+ "5.0%",
+ "0.4%",
+ "0.3%",
+ "4.9%",
+ "1.3%",
+ "0.9%",
+ "4.3%",
+ "0.1%",
+ "0.1%",
+ "3.1%",
+ "0.5%",
+ "3.2%",
+ "4.8%",
+ "2.4%",
+ "2.6%"
+ ],
+ "footer": "37,665",
+ "na": "x",
+ "style": [
+ {
+ "background": "#CCDEEF"
+ },
+ {
+ "background": "#DBE8F4"
+ },
+ {
+ "background": "#BFD5EA"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#CFE0F0"
+ },
+ {
+ "background": "#7CA9D1"
+ },
+ {
+ "background": "#528DC2"
+ },
+ {
+ "background": "#BFD5EA"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#568FC3"
+ },
+ {
+ "background": "#6397C8"
+ },
+ {
+ "background": "#548EC2"
+ },
+ {
+ "background": "#9FC0DE"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#3D7EBA"
+ },
+ {
+ "background": "#F1F7FC"
+ },
+ {
+ "background": "#F2F8FD"
+ },
+ {
+ "background": "#6599C9"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#E2EDF7"
+ },
+ {
+ "background": "#6096C7"
+ },
+ {
+ "background": "#ECF3FA"
+ },
+ {
+ "background": "#F0F6FC"
+ },
+ {
+ "background": "#6297C7"
+ },
+ {
+ "background": "#D1E2F1"
+ },
+ {
+ "background": "#DDE9F5"
+ },
+ {
+ "background": "#75A4CF"
+ },
+ {
+ "background": "#F4F9FE"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#9ABCDC"
+ },
+ {
+ "background": "#E8F1F9"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#AECAE4"
+ },
+ {
+ "background": "#A9C6E2"
+ }
+ ]
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "6.2%",
+ "6.0%",
+ "5.7%",
+ "5.4%",
+ "5.4%",
+ "5.3%",
+ "5.2%",
+ "4.2%",
+ "4.0%",
+ "4.0%",
+ "3.7%",
+ "3.4%",
+ "3.3%",
+ "3.2%",
+ "3.1%",
+ "3.0%",
+ "2.9%",
+ "2.6%",
+ "2.5%",
+ "2.5%",
+ "2.4%",
+ "2.4%",
+ "2.4%",
+ "2.3%",
+ "2.2%",
+ "2.2%",
+ "1.1%",
+ "0.9%",
+ "0.8%",
+ "0.7%",
+ "0.4%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%"
+ ],
+ "footer": "43,010",
+ "na": "x",
+ "style": [
+ {
+ "background": "#3B7DB9"
+ },
+ {
+ "background": "#4281BC"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#5790C4"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#88B1D6"
+ },
+ {
+ "background": "#91B7D9"
+ },
+ {
+ "background": "#92B7D9"
+ },
+ {
+ "background": "#98BBDB"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#9FC0DE"
+ },
+ {
+ "background": "#A9C6E2"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#AECAE4"
+ },
+ {
+ "background": "#AFCBE4"
+ },
+ {
+ "background": "#AFCBE4"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#B4CEE6"
+ },
+ {
+ "background": "#B6CFE7"
+ },
+ {
+ "background": "#D6E5F3"
+ },
+ {
+ "background": "#DCE9F5"
+ },
+ {
+ "background": "#E1ECF7"
+ },
+ {
+ "background": "#E4EEF8"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#F1F7FC"
+ },
+ {
+ "background": "#F1F7FD"
+ },
+ {
+ "background": "#F3F8FD"
+ },
+ {
+ "background": "#F3F8FD"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_1.json b/tests/shinytest/testUI-current/industryBySubject_1.json
new file mode 100644
index 0000000..73fed50
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_1.json
@@ -0,0 +1,666 @@
+{
+ "input": {
+ "countinput3": "sex",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "5"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry five years after\n graduation by the subject they studied and sex, first degree graduates from English HEIs,\n APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Agriculture, food and related studies",
+ "History and archaeology",
+ "Mathematical sciences",
+ "Economics",
+ "Chemistry",
+ "Engineering",
+ "Physics and astronomy",
+ "Celtic studies",
+ "Law",
+ "Politics",
+ "English studies",
+ "Materials and technology",
+ "Psychology",
+ "Medicine and dentistry",
+ "General, applied and forensic sciences",
+ "Biosciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Performing arts",
+ "Allied health",
+ "Languages and area studies",
+ "Combined and general studies",
+ "Education and teaching",
+ "Creative arts and design",
+ "Geography, earth and environmental studies",
+ "Computing",
+ "Sport and exercise sciences",
+ "Veterinary sciences",
+ "Nursing and midwifery",
+ "Health and social care",
+ "Sociology, social policy and anthropology",
+ "Media, journalism and communications",
+ "Philosophy and religious studies",
+ "Medical sciences",
+ "Architecture, building and planning",
+ "Business and management"
+ ],
+ "Female": [
+ 24200,
+ 26900,
+ 24600,
+ 26100,
+ 26000,
+ 25600,
+ 24800,
+ 25600,
+ -100000,
+ 24300,
+ 24200,
+ 25700,
+ 26600,
+ 25600,
+ 25300,
+ 24700,
+ 23800,
+ 26600,
+ 23700,
+ 25200,
+ 24400,
+ 23700,
+ 25500,
+ 26200,
+ 25900,
+ 23800,
+ 24300,
+ 25600,
+ 24800,
+ 23800,
+ 25000,
+ 24200,
+ 25900,
+ 26100,
+ 24700
+ ],
+ "Male": [
+ 23800,
+ 25100,
+ 25600,
+ 24000,
+ 24300,
+ 23800,
+ 25300,
+ 24900,
+ 23200,
+ 24900,
+ 24200,
+ 24300,
+ 22600,
+ 22900,
+ 25800,
+ 25100,
+ 24400,
+ 25600,
+ 24400,
+ 25800,
+ 23300,
+ 23900,
+ 25100,
+ 25500,
+ 25800,
+ 26500,
+ 26400,
+ 26400,
+ 24800,
+ 23300,
+ 26100,
+ 24900,
+ 26100,
+ 23900,
+ 25000
+ ],
+ "Female & Male": [
+ 25000,
+ 25400,
+ 25000,
+ 25700,
+ 24100,
+ 25300,
+ 23800,
+ 26000,
+ 27200,
+ 26700,
+ 25700,
+ 24400,
+ 25700,
+ 23700,
+ 25800,
+ 23800,
+ 24500,
+ 23700,
+ 25400,
+ 24400,
+ 24800,
+ 25200,
+ 24000,
+ 24200,
+ 25100,
+ 25400,
+ 25300,
+ 25200,
+ 25300,
+ 27000,
+ 24900,
+ 25800,
+ 25700,
+ 25700,
+ 25600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 600
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,200",
+ "£26,900",
+ "£24,600",
+ "£26,100",
+ "£26,000",
+ "£25,600",
+ "£24,800",
+ "£25,600",
+ "c",
+ "£24,300",
+ "£24,200",
+ "£25,700",
+ "£26,600",
+ "£25,600",
+ "£25,300",
+ "£24,700",
+ "£23,800",
+ "£26,600",
+ "£23,700",
+ "£25,200",
+ "£24,400",
+ "£23,700",
+ "£25,500",
+ "£26,200",
+ "£25,900",
+ "£23,800",
+ "£24,300",
+ "£25,600",
+ "£24,800",
+ "£23,800",
+ "£25,000",
+ "£24,200",
+ "£25,900",
+ "£26,100",
+ "£24,700"
+ ],
+ "footer": "39,435",
+ "na": "x",
+ "style": [
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#3C7DB9"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#5E95C6"
+ },
+ {
+ "background": "#6397C8"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ null,
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#81ACD3"
+ },
+ {
+ "background": "#9BBDDD"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#C7DAED"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#C7DAED"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#8EB5D8"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#5E95C6"
+ },
+ {
+ "background": "#9BBDDD"
+ }
+ ]
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,800",
+ "£25,100",
+ "£25,600",
+ "£24,000",
+ "£24,300",
+ "£23,800",
+ "£25,300",
+ "£24,900",
+ "£23,200",
+ "£24,900",
+ "£24,200",
+ "£24,300",
+ "£22,600",
+ "£22,900",
+ "£25,800",
+ "£25,100",
+ "£24,400",
+ "£25,600",
+ "£24,400",
+ "£25,800",
+ "£23,300",
+ "£23,900",
+ "£25,100",
+ "£25,500",
+ "£25,800",
+ "£26,500",
+ "£26,400",
+ "£26,400",
+ "£24,800",
+ "£23,300",
+ "£26,100",
+ "£24,900",
+ "£26,100",
+ "£23,900",
+ "£25,000"
+ ],
+ "footer": "37,665",
+ "na": "x",
+ "style": [
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#8AB2D6"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#81ACD3"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#DCE9F5"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#E9F2FA"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#8AB2D6"
+ },
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#8AB2D6"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ {
+ "background": "#518CC1"
+ },
+ {
+ "background": "#518CC1"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ {
+ "background": "#5E95C6"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#5E95C6"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#8EB5D8"
+ }
+ ]
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,000",
+ "£25,400",
+ "£25,000",
+ "£25,700",
+ "£24,100",
+ "£25,300",
+ "£23,800",
+ "£26,000",
+ "£27,200",
+ "£26,700",
+ "£25,700",
+ "£24,400",
+ "£25,700",
+ "£23,700",
+ "£25,800",
+ "£23,800",
+ "£24,500",
+ "£23,700",
+ "£25,400",
+ "£24,400",
+ "£24,800",
+ "£25,200",
+ "£24,000",
+ "£24,200",
+ "£25,100",
+ "£25,400",
+ "£25,300",
+ "£25,200",
+ "£25,300",
+ "£27,000",
+ "£24,900",
+ "£25,800",
+ "£25,700",
+ "£25,700",
+ "£25,600"
+ ],
+ "footer": "43,010",
+ "na": "x",
+ "style": [
+ {
+ "background": "#8EB5D8"
+ },
+ {
+ "background": "#7DA9D1"
+ },
+ {
+ "background": "#8EB5D8"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#81ACD3"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#6397C8"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#4483BD"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#C7DAED"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#C2D8EB"
+ },
+ {
+ "background": "#A4C3E0"
+ },
+ {
+ "background": "#C7DAED"
+ },
+ {
+ "background": "#7DA9D1"
+ },
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#8AB2D6"
+ },
+ {
+ "background": "#7DA9D1"
+ },
+ {
+ "background": "#81ACD3"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#81ACD3"
+ },
+ {
+ "background": "#377AB8"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#74A3CE"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_2.json b/tests/shinytest/testUI-current/industryBySubject_2.json
new file mode 100644
index 0000000..6cda06f
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_2.json
@@ -0,0 +1,1216 @@
+{
+ "input": {
+ "countinput3": "ethnicity",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "5"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry five years after\n graduation by the subject they studied and ethnicity, male and female first degree graduates from\n English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Agriculture, food and related studies",
+ "History and archaeology",
+ "Mathematical sciences",
+ "Economics",
+ "Chemistry",
+ "Engineering",
+ "Physics and astronomy",
+ "Celtic studies",
+ "Law",
+ "Politics",
+ "English studies",
+ "Materials and technology",
+ "Psychology",
+ "Medicine and dentistry",
+ "General, applied and forensic sciences",
+ "Biosciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Performing arts",
+ "Allied health",
+ "Languages and area studies",
+ "Combined and general studies",
+ "Education and teaching",
+ "Creative arts and design",
+ "Geography, earth and environmental studies",
+ "Computing",
+ "Sport and exercise sciences",
+ "Veterinary sciences",
+ "Nursing and midwifery",
+ "Health and social care",
+ "Sociology, social policy and anthropology",
+ "Media, journalism and communications",
+ "Philosophy and religious studies",
+ "Medical sciences",
+ "Architecture, building and planning",
+ "Business and management"
+ ],
+ "White": [
+ 26100,
+ 26200,
+ 24900,
+ 26700,
+ 25500,
+ 25400,
+ 26200,
+ 23300,
+ 24800,
+ 24900,
+ 25100,
+ 27200,
+ 25400,
+ 22900,
+ 23900,
+ 23400,
+ 22900,
+ 25900,
+ 25400,
+ 24400,
+ 25300,
+ 24100,
+ 26600,
+ 24800,
+ 26400,
+ 24200,
+ 27500,
+ 26200,
+ 25600,
+ 24000,
+ 25600,
+ 22700,
+ 25100,
+ 23700,
+ 24300
+ ],
+ "Black": [
+ 23400,
+ 24800,
+ 25700,
+ 24100,
+ 24100,
+ 24100,
+ 26300,
+ "NA",
+ 24800,
+ 25000,
+ 24800,
+ 24200,
+ 26300,
+ 25000,
+ 24600,
+ 25000,
+ 24700,
+ 21500,
+ 24700,
+ 27500,
+ 25900,
+ 23600,
+ 24300,
+ 25500,
+ 24400,
+ 26500,
+ 26200,
+ 22900,
+ 25600,
+ 24200,
+ 24500,
+ 25500,
+ 23500,
+ 25100,
+ 25200
+ ],
+ "Asian": [
+ 25600,
+ 27000,
+ 25500,
+ 24400,
+ 23500,
+ 23700,
+ 26400,
+ "NA",
+ 24200,
+ 25500,
+ 25700,
+ 24900,
+ 25300,
+ 24800,
+ 23500,
+ 24700,
+ 25400,
+ 24400,
+ 25300,
+ 25500,
+ 25900,
+ 25600,
+ 23400,
+ 25700,
+ 25600,
+ 26000,
+ "NA",
+ 26400,
+ 24500,
+ 23300,
+ 24700,
+ 24900,
+ 24200,
+ 24600,
+ 25100
+ ],
+ "Mixed": [
+ 26800,
+ 23900,
+ 24700,
+ 23300,
+ 26000,
+ 25900,
+ 26000,
+ "NA",
+ 25800,
+ 25600,
+ 23700,
+ 24100,
+ 22500,
+ 25600,
+ 25200,
+ 26400,
+ 26400,
+ 24100,
+ 24700,
+ 25100,
+ 24000,
+ 25300,
+ 25100,
+ 26400,
+ 26500,
+ 26700,
+ "NA",
+ 24200,
+ 25000,
+ 25100,
+ 25200,
+ 24300,
+ 25200,
+ 24500,
+ 25200
+ ],
+ "Other": [
+ "NA",
+ 25300,
+ 24300,
+ 25400,
+ 24500,
+ 25600,
+ 27000,
+ "NA",
+ 24700,
+ 25300,
+ 24700,
+ "NA",
+ 24600,
+ 25100,
+ 24200,
+ 25600,
+ 26500,
+ 23700,
+ 25100,
+ 24600,
+ 25200,
+ 25400,
+ 23900,
+ 25200,
+ 25400,
+ 23800,
+ "NA",
+ 24900,
+ 25000,
+ 24400,
+ 25800,
+ 25000,
+ 24300,
+ "NA",
+ 27200
+ ],
+ "Not known": [
+ 23500,
+ 23700,
+ 24200,
+ 25500,
+ 25400,
+ 25800,
+ 24700,
+ "NA",
+ 26200,
+ 24400,
+ 24700,
+ 25100,
+ 26200,
+ 23600,
+ 25800,
+ 24100,
+ 24700,
+ 25100,
+ 23100,
+ 26000,
+ 27400,
+ 25400,
+ 23900,
+ 23900,
+ 24900,
+ 24300,
+ "NA",
+ 26000,
+ 26400,
+ 25400,
+ 24700,
+ 25700,
+ 24800,
+ 25300,
+ 24700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "width": 600
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,100",
+ "£26,200",
+ "£24,900",
+ "£26,700",
+ "£25,500",
+ "£25,400",
+ "£26,200",
+ "£23,300",
+ "£24,800",
+ "£24,900",
+ "£25,100",
+ "£27,200",
+ "£25,400",
+ "£22,900",
+ "£23,900",
+ "£23,400",
+ "£22,900",
+ "£25,900",
+ "£25,400",
+ "£24,400",
+ "£25,300",
+ "£24,100",
+ "£26,600",
+ "£24,800",
+ "£26,400",
+ "£24,200",
+ "£27,500",
+ "£26,200",
+ "£25,600",
+ "£24,000",
+ "£25,600",
+ "£22,700",
+ "£25,100",
+ "£23,700",
+ "£24,300"
+ ],
+ "footer": "36,935",
+ "na": "x",
+ "style": [
+ {
+ "background": "#5D94C6"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#BBD2E8"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#397BB8"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#C8DBED"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#C8DBED"
+ },
+ {
+ "background": "#6498C8"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#CFE0F0"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#99BCDC"
+ }
+ ]
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,400",
+ "£24,800",
+ "£25,700",
+ "£24,100",
+ "£24,100",
+ "£24,100",
+ "£26,300",
+ "x",
+ "£24,800",
+ "£25,000",
+ "£24,800",
+ "£24,200",
+ "£26,300",
+ "£25,000",
+ "£24,600",
+ "£25,000",
+ "£24,700",
+ "£21,500",
+ "£24,700",
+ "£27,500",
+ "£25,900",
+ "£23,600",
+ "£24,300",
+ "£25,500",
+ "£24,400",
+ "£26,500",
+ "£26,200",
+ "£22,900",
+ "£25,600",
+ "£24,200",
+ "£24,500",
+ "£25,500",
+ "£23,500",
+ "£25,100",
+ "£25,200"
+ ],
+ "footer": "36,950",
+ "na": "x",
+ "style": [
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#578FC3"
+ },
+ null,
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#578FC3"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#6498C8"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#C8DBED"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#B4CEE6"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#7BA8D1"
+ }
+ ]
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,600",
+ "£27,000",
+ "£25,500",
+ "£24,400",
+ "£23,500",
+ "£23,700",
+ "£26,400",
+ "x",
+ "£24,200",
+ "£25,500",
+ "£25,700",
+ "£24,900",
+ "£25,300",
+ "£24,800",
+ "£23,500",
+ "£24,700",
+ "£25,400",
+ "£24,400",
+ "£25,300",
+ "£25,500",
+ "£25,900",
+ "£25,600",
+ "£23,400",
+ "£25,700",
+ "£25,600",
+ "£26,000",
+ "x",
+ "£26,400",
+ "£24,500",
+ "£23,300",
+ "£24,700",
+ "£24,900",
+ "£24,200",
+ "£24,600",
+ "£25,100"
+ ],
+ "footer": "46,450",
+ "na": "x",
+ "style": [
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#3F80BB"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#B4CEE6"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#538DC2"
+ },
+ null,
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#B4CEE6"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#6498C8"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#6196C7"
+ },
+ null,
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#BBD2E8"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#7FAAD2"
+ }
+ ]
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,800",
+ "£23,900",
+ "£24,700",
+ "£23,300",
+ "£26,000",
+ "£25,900",
+ "£26,000",
+ "x",
+ "£25,800",
+ "£25,600",
+ "£23,700",
+ "£24,100",
+ "£22,500",
+ "£25,600",
+ "£25,200",
+ "£26,400",
+ "£26,400",
+ "£24,100",
+ "£24,700",
+ "£25,100",
+ "£24,000",
+ "£25,300",
+ "£25,100",
+ "£26,400",
+ "£26,500",
+ "£26,700",
+ "x",
+ "£24,200",
+ "£25,000",
+ "£25,100",
+ "£25,200",
+ "£24,300",
+ "£25,200",
+ "£24,500",
+ "£25,200"
+ ],
+ "footer": "39,165",
+ "na": "x",
+ "style": [
+ {
+ "background": "#4684BD"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#BBD2E8"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#6498C8"
+ },
+ {
+ "background": "#6196C7"
+ },
+ null,
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#4986BE"
+ },
+ null,
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#7BA8D1"
+ }
+ ]
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£25,300",
+ "£24,300",
+ "£25,400",
+ "£24,500",
+ "£25,600",
+ "£27,000",
+ "x",
+ "£24,700",
+ "£25,300",
+ "£24,700",
+ "x",
+ "£24,600",
+ "£25,100",
+ "£24,200",
+ "£25,600",
+ "£26,500",
+ "£23,700",
+ "£25,100",
+ "£24,600",
+ "£25,200",
+ "£25,400",
+ "£23,900",
+ "£25,200",
+ "£25,400",
+ "£23,800",
+ "x",
+ "£24,900",
+ "£25,000",
+ "£24,400",
+ "£25,800",
+ "£25,000",
+ "£24,300",
+ "x",
+ "£27,200"
+ ],
+ "footer": "36,630",
+ "na": "x",
+ "style": [
+ null,
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#3F80BB"
+ },
+ null,
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ null,
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#AAC7E2"
+ },
+ null,
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ null,
+ {
+ "background": "#397BB8"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,500",
+ "£23,700",
+ "£24,200",
+ "£25,500",
+ "£25,400",
+ "£25,800",
+ "£24,700",
+ "x",
+ "£26,200",
+ "£24,400",
+ "£24,700",
+ "£25,100",
+ "£26,200",
+ "£23,600",
+ "£25,800",
+ "£24,100",
+ "£24,700",
+ "£25,100",
+ "£23,100",
+ "£26,000",
+ "£27,400",
+ "£25,400",
+ "£23,900",
+ "£23,900",
+ "£24,900",
+ "£24,300",
+ "x",
+ "£26,000",
+ "£26,400",
+ "£25,400",
+ "£24,700",
+ "£25,700",
+ "£24,800",
+ "£25,300",
+ "£24,700"
+ ],
+ "footer": "45,630",
+ "na": "x",
+ "style": [
+ {
+ "background": "#B4CEE6"
+ },
+ {
+ "background": "#ADC9E3"
+ },
+ {
+ "background": "#9DBEDD"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ null,
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#5A92C5"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#7FAAD2"
+ },
+ {
+ "background": "#C1D7EB"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#3277B6"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ null,
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#538DC2"
+ },
+ {
+ "background": "#75A3CE"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#78A6D0"
+ },
+ {
+ "background": "#8CB3D7"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_3.json b/tests/shinytest/testUI-current/industryBySubject_3.json
new file mode 100644
index 0000000..41fd8fe
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_3.json
@@ -0,0 +1,1216 @@
+{
+ "input": {
+ "countinput3": "ethnicity",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "10"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry ten years after\n graduation by the subject they studied and ethnicity, male and female first degree graduates from\n English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Business and management",
+ "English studies",
+ "General, applied and forensic sciences",
+ "Languages and area studies",
+ "Health and social care",
+ "Media, journalism and communications",
+ "Veterinary sciences",
+ "Physics and astronomy",
+ "Law",
+ "History and archaeology",
+ "Mathematical sciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Sport and exercise sciences",
+ "Philosophy and religious studies",
+ "Biosciences",
+ "Engineering",
+ "Medicine and dentistry",
+ "Medical sciences",
+ "Agriculture, food and related studies",
+ "Architecture, building and planning",
+ "Chemistry",
+ "Creative arts and design",
+ "Psychology",
+ "Nursing and midwifery",
+ "Economics",
+ "Geography, earth and environmental studies",
+ "Sociology, social policy and anthropology",
+ "Performing arts",
+ "Allied health",
+ "Computing",
+ "Education and teaching",
+ "Materials and technology",
+ "Celtic studies",
+ "Politics",
+ "Combined and general studies"
+ ],
+ "White": [
+ 23300,
+ 23000,
+ 25400,
+ 23800,
+ 24900,
+ 26200,
+ 26400,
+ 25900,
+ 26100,
+ 25100,
+ 26100,
+ 23900,
+ 24600,
+ 24100,
+ 25900,
+ 23800,
+ 26500,
+ 24100,
+ 24900,
+ 26100,
+ 23300,
+ 25300,
+ 23900,
+ 24300,
+ 25500,
+ 25800,
+ 25000,
+ 24900,
+ 26700,
+ 24800,
+ 25200,
+ 25500,
+ 24600,
+ 23400,
+ 25600
+ ],
+ "Black": [
+ 25100,
+ 22100,
+ 23700,
+ 24600,
+ 23700,
+ 25000,
+ "NA",
+ 25500,
+ 23800,
+ 24700,
+ 25800,
+ 25700,
+ 24500,
+ 24700,
+ 25100,
+ 25300,
+ 24700,
+ 24600,
+ 26200,
+ 24500,
+ 25400,
+ 25100,
+ 24000,
+ 25700,
+ 26100,
+ 26200,
+ 25400,
+ 24900,
+ 25100,
+ 24100,
+ 24300,
+ 26500,
+ "NA",
+ 26900,
+ 24400
+ ],
+ "Asian": [
+ 26300,
+ 26300,
+ 24400,
+ 25900,
+ 24400,
+ 24500,
+ "NA",
+ 24900,
+ 25600,
+ 26000,
+ 26500,
+ 24300,
+ 23900,
+ 25400,
+ 24400,
+ 24600,
+ 26200,
+ 24700,
+ 25100,
+ 25100,
+ 26400,
+ 24800,
+ 23100,
+ 24000,
+ 24500,
+ 24600,
+ 23300,
+ 24000,
+ 24800,
+ 25600,
+ 23100,
+ 25100,
+ "NA",
+ 25800,
+ 24900
+ ],
+ "Mixed": [
+ 24700,
+ 25400,
+ 23500,
+ 24800,
+ 25100,
+ 25600,
+ "NA",
+ 25100,
+ 25300,
+ 24700,
+ 24600,
+ 25000,
+ 24800,
+ 25800,
+ 24900,
+ 26300,
+ 26200,
+ 24100,
+ 25500,
+ 23600,
+ 25200,
+ 27400,
+ 24900,
+ 23000,
+ 24900,
+ 24300,
+ 25500,
+ 25700,
+ 25300,
+ 24000,
+ 24400,
+ 26600,
+ "NA",
+ 23200,
+ 24400
+ ],
+ "Other": [
+ 24500,
+ 25300,
+ 25400,
+ 24400,
+ 22600,
+ 25700,
+ "NA",
+ 24600,
+ 25900,
+ 26200,
+ 24500,
+ "NA",
+ 25900,
+ 25800,
+ 25500,
+ 24300,
+ 25800,
+ 24200,
+ "NA",
+ "NA",
+ 25300,
+ 25700,
+ 25000,
+ "NA",
+ 24200,
+ 26700,
+ 25100,
+ 25500,
+ 24900,
+ 25800,
+ 25200,
+ 24200,
+ "NA",
+ 24100,
+ 24800
+ ],
+ "Not known": [
+ 24300,
+ 24900,
+ 24800,
+ 25200,
+ 25000,
+ 25200,
+ 23500,
+ 25300,
+ 22800,
+ 27000,
+ 22400,
+ 25900,
+ 25000,
+ 23500,
+ 24800,
+ 26700,
+ 24800,
+ 23200,
+ 26700,
+ 26300,
+ 25300,
+ 26500,
+ 27200,
+ 23500,
+ 25000,
+ 25300,
+ 24500,
+ 23800,
+ 25900,
+ 25800,
+ 23900,
+ 25100,
+ 26000,
+ 25900,
+ 24800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "width": 600
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,300",
+ "£23,000",
+ "£25,400",
+ "£23,800",
+ "£24,900",
+ "£26,200",
+ "£26,400",
+ "£25,900",
+ "£26,100",
+ "£25,100",
+ "£26,100",
+ "£23,900",
+ "£24,600",
+ "£24,100",
+ "£25,900",
+ "£23,800",
+ "£26,500",
+ "£24,100",
+ "£24,900",
+ "£26,100",
+ "£23,300",
+ "£25,300",
+ "£23,900",
+ "£24,300",
+ "£25,500",
+ "£25,800",
+ "£25,000",
+ "£24,900",
+ "£26,700",
+ "£24,800",
+ "£25,200",
+ "£25,500",
+ "£24,600",
+ "£23,400",
+ "£25,600"
+ ],
+ "footer": "43,950",
+ "na": "x",
+ "style": [
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#548EC2"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#C5DAEC"
+ },
+ {
+ "background": "#72A2CE"
+ }
+ ]
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,100",
+ "£22,100",
+ "£23,700",
+ "£24,600",
+ "£23,700",
+ "£25,000",
+ "x",
+ "£25,500",
+ "£23,800",
+ "£24,700",
+ "£25,800",
+ "£25,700",
+ "£24,500",
+ "£24,700",
+ "£25,100",
+ "£25,300",
+ "£24,700",
+ "£24,600",
+ "£26,200",
+ "£24,500",
+ "£25,400",
+ "£25,100",
+ "£24,000",
+ "£25,700",
+ "£26,100",
+ "£26,200",
+ "£25,400",
+ "£24,900",
+ "£25,100",
+ "£24,100",
+ "£24,300",
+ "£26,500",
+ "x",
+ "£26,900",
+ "£24,400"
+ ],
+ "footer": "32,395",
+ "na": "x",
+ "style": [
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ null,
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#508BC1"
+ },
+ null,
+ {
+ "background": "#4181BB"
+ },
+ {
+ "background": "#A0C0DE"
+ }
+ ]
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,300",
+ "£26,300",
+ "£24,400",
+ "£25,900",
+ "£24,400",
+ "£24,500",
+ "x",
+ "£24,900",
+ "£25,600",
+ "£26,000",
+ "£26,500",
+ "£24,300",
+ "£23,900",
+ "£25,400",
+ "£24,400",
+ "£24,600",
+ "£26,200",
+ "£24,700",
+ "£25,100",
+ "£25,100",
+ "£26,400",
+ "£24,800",
+ "£23,100",
+ "£24,000",
+ "£24,500",
+ "£24,600",
+ "£23,300",
+ "£24,000",
+ "£24,800",
+ "£25,600",
+ "£23,100",
+ "£25,100",
+ "x",
+ "£25,800",
+ "£24,900"
+ ],
+ "footer": "46,950",
+ "na": "x",
+ "style": [
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ {
+ "background": "#6398C8"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#548EC2"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#D1E1F1"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ {
+ "background": "#D1E1F1"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ null,
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#8DB4D7"
+ }
+ ]
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,700",
+ "£25,400",
+ "£23,500",
+ "£24,800",
+ "£25,100",
+ "£25,600",
+ "x",
+ "£25,100",
+ "£25,300",
+ "£24,700",
+ "£24,600",
+ "£25,000",
+ "£24,800",
+ "£25,800",
+ "£24,900",
+ "£26,300",
+ "£26,200",
+ "£24,100",
+ "£25,500",
+ "£23,600",
+ "£25,200",
+ "£27,400",
+ "£24,900",
+ "£23,000",
+ "£24,900",
+ "£24,300",
+ "£25,500",
+ "£25,700",
+ "£25,300",
+ "£24,000",
+ "£24,400",
+ "£26,600",
+ "x",
+ "£23,200",
+ "£24,400"
+ ],
+ "footer": "44,290",
+ "na": "x",
+ "style": [
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ null,
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ null,
+ {
+ "background": "#CDDFEF"
+ },
+ {
+ "background": "#A0C0DE"
+ }
+ ]
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,500",
+ "£25,300",
+ "£25,400",
+ "£24,400",
+ "£22,600",
+ "£25,700",
+ "x",
+ "£24,600",
+ "£25,900",
+ "£26,200",
+ "£24,500",
+ "x",
+ "£25,900",
+ "£25,800",
+ "£25,500",
+ "£24,300",
+ "£25,800",
+ "£24,200",
+ "x",
+ "x",
+ "£25,300",
+ "£25,700",
+ "£25,000",
+ "x",
+ "£24,200",
+ "£26,700",
+ "£25,100",
+ "£25,500",
+ "£24,900",
+ "£25,800",
+ "£25,200",
+ "£24,200",
+ "x",
+ "£24,100",
+ "£24,800"
+ ],
+ "footer": "32,765",
+ "na": "x",
+ "style": [
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#E4EEF8"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ null,
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ null,
+ null,
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ null,
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ null,
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#91B6D9"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,300",
+ "£24,900",
+ "£24,800",
+ "£25,200",
+ "£25,000",
+ "£25,200",
+ "£23,500",
+ "£25,300",
+ "£22,800",
+ "£27,000",
+ "£22,400",
+ "£25,900",
+ "£25,000",
+ "£23,500",
+ "£24,800",
+ "£26,700",
+ "£24,800",
+ "£23,200",
+ "£26,700",
+ "£26,300",
+ "£25,300",
+ "£26,500",
+ "£27,200",
+ "£23,500",
+ "£25,000",
+ "£25,300",
+ "£24,500",
+ "£23,800",
+ "£25,900",
+ "£25,800",
+ "£23,900",
+ "£25,100",
+ "£26,000",
+ "£25,900",
+ "£24,800"
+ ],
+ "footer": "46,025",
+ "na": "x",
+ "style": [
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#DCE9F5"
+ },
+ {
+ "background": "#3E7FBA"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#CDDFEF"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#367AB7"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#6398C8"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#91B6D9"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_4.json b/tests/shinytest/testUI-current/industryBySubject_4.json
new file mode 100644
index 0000000..41fd8fe
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_4.json
@@ -0,0 +1,1216 @@
+{
+ "input": {
+ "countinput3": "ethnicity",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "10"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry ten years after\n graduation by the subject they studied and ethnicity, male and female first degree graduates from\n English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Business and management",
+ "English studies",
+ "General, applied and forensic sciences",
+ "Languages and area studies",
+ "Health and social care",
+ "Media, journalism and communications",
+ "Veterinary sciences",
+ "Physics and astronomy",
+ "Law",
+ "History and archaeology",
+ "Mathematical sciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Sport and exercise sciences",
+ "Philosophy and religious studies",
+ "Biosciences",
+ "Engineering",
+ "Medicine and dentistry",
+ "Medical sciences",
+ "Agriculture, food and related studies",
+ "Architecture, building and planning",
+ "Chemistry",
+ "Creative arts and design",
+ "Psychology",
+ "Nursing and midwifery",
+ "Economics",
+ "Geography, earth and environmental studies",
+ "Sociology, social policy and anthropology",
+ "Performing arts",
+ "Allied health",
+ "Computing",
+ "Education and teaching",
+ "Materials and technology",
+ "Celtic studies",
+ "Politics",
+ "Combined and general studies"
+ ],
+ "White": [
+ 23300,
+ 23000,
+ 25400,
+ 23800,
+ 24900,
+ 26200,
+ 26400,
+ 25900,
+ 26100,
+ 25100,
+ 26100,
+ 23900,
+ 24600,
+ 24100,
+ 25900,
+ 23800,
+ 26500,
+ 24100,
+ 24900,
+ 26100,
+ 23300,
+ 25300,
+ 23900,
+ 24300,
+ 25500,
+ 25800,
+ 25000,
+ 24900,
+ 26700,
+ 24800,
+ 25200,
+ 25500,
+ 24600,
+ 23400,
+ 25600
+ ],
+ "Black": [
+ 25100,
+ 22100,
+ 23700,
+ 24600,
+ 23700,
+ 25000,
+ "NA",
+ 25500,
+ 23800,
+ 24700,
+ 25800,
+ 25700,
+ 24500,
+ 24700,
+ 25100,
+ 25300,
+ 24700,
+ 24600,
+ 26200,
+ 24500,
+ 25400,
+ 25100,
+ 24000,
+ 25700,
+ 26100,
+ 26200,
+ 25400,
+ 24900,
+ 25100,
+ 24100,
+ 24300,
+ 26500,
+ "NA",
+ 26900,
+ 24400
+ ],
+ "Asian": [
+ 26300,
+ 26300,
+ 24400,
+ 25900,
+ 24400,
+ 24500,
+ "NA",
+ 24900,
+ 25600,
+ 26000,
+ 26500,
+ 24300,
+ 23900,
+ 25400,
+ 24400,
+ 24600,
+ 26200,
+ 24700,
+ 25100,
+ 25100,
+ 26400,
+ 24800,
+ 23100,
+ 24000,
+ 24500,
+ 24600,
+ 23300,
+ 24000,
+ 24800,
+ 25600,
+ 23100,
+ 25100,
+ "NA",
+ 25800,
+ 24900
+ ],
+ "Mixed": [
+ 24700,
+ 25400,
+ 23500,
+ 24800,
+ 25100,
+ 25600,
+ "NA",
+ 25100,
+ 25300,
+ 24700,
+ 24600,
+ 25000,
+ 24800,
+ 25800,
+ 24900,
+ 26300,
+ 26200,
+ 24100,
+ 25500,
+ 23600,
+ 25200,
+ 27400,
+ 24900,
+ 23000,
+ 24900,
+ 24300,
+ 25500,
+ 25700,
+ 25300,
+ 24000,
+ 24400,
+ 26600,
+ "NA",
+ 23200,
+ 24400
+ ],
+ "Other": [
+ 24500,
+ 25300,
+ 25400,
+ 24400,
+ 22600,
+ 25700,
+ "NA",
+ 24600,
+ 25900,
+ 26200,
+ 24500,
+ "NA",
+ 25900,
+ 25800,
+ 25500,
+ 24300,
+ 25800,
+ 24200,
+ "NA",
+ "NA",
+ 25300,
+ 25700,
+ 25000,
+ "NA",
+ 24200,
+ 26700,
+ 25100,
+ 25500,
+ 24900,
+ 25800,
+ 25200,
+ 24200,
+ "NA",
+ 24100,
+ 24800
+ ],
+ "Not known": [
+ 24300,
+ 24900,
+ 24800,
+ 25200,
+ 25000,
+ 25200,
+ 23500,
+ 25300,
+ 22800,
+ 27000,
+ 22400,
+ 25900,
+ 25000,
+ 23500,
+ 24800,
+ 26700,
+ 24800,
+ 23200,
+ 26700,
+ 26300,
+ 25300,
+ 26500,
+ 27200,
+ 23500,
+ 25000,
+ 25300,
+ 24500,
+ 23800,
+ 25900,
+ 25800,
+ 23900,
+ 25100,
+ 26000,
+ 25900,
+ 24800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "width": 600
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,300",
+ "£23,000",
+ "£25,400",
+ "£23,800",
+ "£24,900",
+ "£26,200",
+ "£26,400",
+ "£25,900",
+ "£26,100",
+ "£25,100",
+ "£26,100",
+ "£23,900",
+ "£24,600",
+ "£24,100",
+ "£25,900",
+ "£23,800",
+ "£26,500",
+ "£24,100",
+ "£24,900",
+ "£26,100",
+ "£23,300",
+ "£25,300",
+ "£23,900",
+ "£24,300",
+ "£25,500",
+ "£25,800",
+ "£25,000",
+ "£24,900",
+ "£26,700",
+ "£24,800",
+ "£25,200",
+ "£25,500",
+ "£24,600",
+ "£23,400",
+ "£25,600"
+ ],
+ "footer": "43,950",
+ "na": "x",
+ "style": [
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#548EC2"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#C5DAEC"
+ },
+ {
+ "background": "#72A2CE"
+ }
+ ]
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,100",
+ "£22,100",
+ "£23,700",
+ "£24,600",
+ "£23,700",
+ "£25,000",
+ "x",
+ "£25,500",
+ "£23,800",
+ "£24,700",
+ "£25,800",
+ "£25,700",
+ "£24,500",
+ "£24,700",
+ "£25,100",
+ "£25,300",
+ "£24,700",
+ "£24,600",
+ "£26,200",
+ "£24,500",
+ "£25,400",
+ "£25,100",
+ "£24,000",
+ "£25,700",
+ "£26,100",
+ "£26,200",
+ "£25,400",
+ "£24,900",
+ "£25,100",
+ "£24,100",
+ "£24,300",
+ "£26,500",
+ "x",
+ "£26,900",
+ "£24,400"
+ ],
+ "footer": "32,395",
+ "na": "x",
+ "style": [
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#BAD2E8"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ null,
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#6095C7"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#508BC1"
+ },
+ null,
+ {
+ "background": "#4181BB"
+ },
+ {
+ "background": "#A0C0DE"
+ }
+ ]
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,300",
+ "£26,300",
+ "£24,400",
+ "£25,900",
+ "£24,400",
+ "£24,500",
+ "x",
+ "£24,900",
+ "£25,600",
+ "£26,000",
+ "£26,500",
+ "£24,300",
+ "£23,900",
+ "£25,400",
+ "£24,400",
+ "£24,600",
+ "£26,200",
+ "£24,700",
+ "£25,100",
+ "£25,100",
+ "£26,400",
+ "£24,800",
+ "£23,100",
+ "£24,000",
+ "£24,500",
+ "£24,600",
+ "£23,300",
+ "£24,000",
+ "£24,800",
+ "£25,600",
+ "£23,100",
+ "£25,100",
+ "x",
+ "£25,800",
+ "£24,900"
+ ],
+ "footer": "46,950",
+ "na": "x",
+ "style": [
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ {
+ "background": "#6398C8"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#548EC2"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#D1E1F1"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ {
+ "background": "#D1E1F1"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ null,
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#8DB4D7"
+ }
+ ]
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,700",
+ "£25,400",
+ "£23,500",
+ "£24,800",
+ "£25,100",
+ "£25,600",
+ "x",
+ "£25,100",
+ "£25,300",
+ "£24,700",
+ "£24,600",
+ "£25,000",
+ "£24,800",
+ "£25,800",
+ "£24,900",
+ "£26,300",
+ "£26,200",
+ "£24,100",
+ "£25,500",
+ "£23,600",
+ "£25,200",
+ "£27,400",
+ "£24,900",
+ "£23,000",
+ "£24,900",
+ "£24,300",
+ "£25,500",
+ "£25,700",
+ "£25,300",
+ "£24,000",
+ "£24,400",
+ "£26,600",
+ "x",
+ "£23,200",
+ "£24,400"
+ ],
+ "footer": "44,290",
+ "na": "x",
+ "style": [
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#72A2CE"
+ },
+ null,
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#94B9DA"
+ },
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ null,
+ {
+ "background": "#CDDFEF"
+ },
+ {
+ "background": "#A0C0DE"
+ }
+ ]
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,500",
+ "£25,300",
+ "£25,400",
+ "£24,400",
+ "£22,600",
+ "£25,700",
+ "x",
+ "£24,600",
+ "£25,900",
+ "£26,200",
+ "£24,500",
+ "x",
+ "£25,900",
+ "£25,800",
+ "£25,500",
+ "£24,300",
+ "£25,800",
+ "£24,200",
+ "x",
+ "x",
+ "£25,300",
+ "£25,700",
+ "£25,000",
+ "x",
+ "£24,200",
+ "£26,700",
+ "£25,100",
+ "£25,500",
+ "£24,900",
+ "£25,800",
+ "£25,200",
+ "£24,200",
+ "x",
+ "£24,100",
+ "£24,800"
+ ],
+ "footer": "32,765",
+ "na": "x",
+ "style": [
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#7AA7D0"
+ },
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#E4EEF8"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ null,
+ {
+ "background": "#98BBDC"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ null,
+ null,
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#6F9FCC"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ null,
+ {
+ "background": "#A7C5E1"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#76A5CF"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#A7C5E1"
+ },
+ null,
+ {
+ "background": "#ABC8E3"
+ },
+ {
+ "background": "#91B6D9"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,300",
+ "£24,900",
+ "£24,800",
+ "£25,200",
+ "£25,000",
+ "£25,200",
+ "£23,500",
+ "£25,300",
+ "£22,800",
+ "£27,000",
+ "£22,400",
+ "£25,900",
+ "£25,000",
+ "£23,500",
+ "£24,800",
+ "£26,700",
+ "£24,800",
+ "£23,200",
+ "£26,700",
+ "£26,300",
+ "£25,300",
+ "£26,500",
+ "£27,200",
+ "£23,500",
+ "£25,000",
+ "£25,300",
+ "£24,500",
+ "£23,800",
+ "£25,900",
+ "£25,800",
+ "£23,900",
+ "£25,100",
+ "£26,000",
+ "£25,900",
+ "£24,800"
+ ],
+ "footer": "46,025",
+ "na": "x",
+ "style": [
+ {
+ "background": "#A3C3E0"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#DCE9F5"
+ },
+ {
+ "background": "#3E7FBA"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#91B6D9"
+ },
+ {
+ "background": "#CDDFEF"
+ },
+ {
+ "background": "#4986BE"
+ },
+ {
+ "background": "#5890C4"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#508BC1"
+ },
+ {
+ "background": "#367AB7"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#7EAAD2"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#B6D0E7"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#6B9DCB"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#85AFD5"
+ },
+ {
+ "background": "#6398C8"
+ },
+ {
+ "background": "#679AC9"
+ },
+ {
+ "background": "#91B6D9"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_5.json b/tests/shinytest/testUI-current/industryBySubject_5.json
new file mode 100644
index 0000000..77e8a3d
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_5.json
@@ -0,0 +1,1169 @@
+{
+ "input": {
+ "countinput3": "ethnicity",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Education",
+ "YAGinput3": "1"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Education industry one year after\n graduation by the subject they studied and ethnicity, male and female first degree graduates from\n English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Computing",
+ "Psychology",
+ "Sport and exercise sciences",
+ "Languages and area studies",
+ "Sociology, social policy and anthropology",
+ "Agriculture, food and related studies",
+ "Creative arts and design",
+ "Business and management",
+ "Architecture, building and planning",
+ "Veterinary sciences",
+ "Health and social care",
+ "Law",
+ "Education and teaching",
+ "Economics",
+ "Medicine and dentistry",
+ "Medical sciences",
+ "Politics",
+ "Mathematical sciences",
+ "Engineering",
+ "History and archaeology",
+ "Performing arts",
+ "Chemistry",
+ "Philosophy and religious studies",
+ "General, applied and forensic sciences",
+ "Pharmacology, toxicology and pharmacy",
+ "Materials and technology",
+ "Geography, earth and environmental studies",
+ "Media, journalism and communications",
+ "Allied health",
+ "Biosciences",
+ "English studies",
+ "Nursing and midwifery",
+ "Combined and general studies",
+ "Physics and astronomy"
+ ],
+ "White": [
+ 23200,
+ 24700,
+ 24400,
+ 25600,
+ 25100,
+ 25500,
+ 26300,
+ 25300,
+ 24700,
+ 24600,
+ 23700,
+ 25200,
+ 25100,
+ 23900,
+ 24600,
+ 24700,
+ 24800,
+ 25400,
+ 25600,
+ 26900,
+ 24900,
+ 24400,
+ 24800,
+ 26100,
+ 25700,
+ 24800,
+ 25400,
+ 23800,
+ 26000,
+ 23800,
+ 25300,
+ 25300,
+ 24300,
+ 25100
+ ],
+ "Black": [
+ 25300,
+ 23600,
+ 25500,
+ 24500,
+ 24100,
+ "NA",
+ 28100,
+ 25100,
+ 23300,
+ "NA",
+ 24800,
+ 25400,
+ 24700,
+ 26700,
+ "NA",
+ 25200,
+ 23100,
+ 25800,
+ 24900,
+ 25600,
+ 23900,
+ 24600,
+ 24600,
+ 23100,
+ 23800,
+ 25200,
+ 26000,
+ 24200,
+ 25500,
+ 25100,
+ 23500,
+ 24300,
+ 24600,
+ 24700
+ ],
+ "Asian": [
+ 25500,
+ 24700,
+ 25700,
+ 26400,
+ 24200,
+ "NA",
+ 23800,
+ 27100,
+ 26000,
+ "NA",
+ 25000,
+ 26600,
+ 26400,
+ 25100,
+ 24100,
+ 23400,
+ 25500,
+ 25400,
+ 24200,
+ 23300,
+ 24600,
+ 25600,
+ 24800,
+ 25600,
+ 24900,
+ "NA",
+ 25000,
+ 23100,
+ 25000,
+ 25600,
+ 25400,
+ 25500,
+ 24400,
+ 24600
+ ],
+ "Mixed": [
+ 25100,
+ 25500,
+ 24500,
+ 26700,
+ 24200,
+ 24300,
+ 26800,
+ 24200,
+ 26400,
+ "NA",
+ 24900,
+ 24000,
+ 24100,
+ 24800,
+ "NA",
+ 24800,
+ 25300,
+ 25400,
+ 25200,
+ 25900,
+ 24300,
+ "NA",
+ 24400,
+ 26000,
+ "NA",
+ 24100,
+ 23600,
+ 25100,
+ 27000,
+ 26400,
+ 27300,
+ 25800,
+ 26000,
+ 23900
+ ],
+ "Other": [
+ 25400,
+ 24400,
+ 26900,
+ 24400,
+ 24000,
+ "NA",
+ 25100,
+ 27000,
+ 24300,
+ "NA",
+ 24800,
+ 26500,
+ 24100,
+ 23400,
+ "NA",
+ "NA",
+ 24500,
+ 24500,
+ 24500,
+ 26400,
+ 26600,
+ 25900,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24300,
+ 25600,
+ 23100,
+ 23400,
+ 23700,
+ "NA",
+ 24800,
+ 25600
+ ],
+ "Not known": [
+ 22900,
+ 23600,
+ 24100,
+ 26700,
+ 25700,
+ 25100,
+ 23800,
+ 24800,
+ 25100,
+ 25800,
+ 26400,
+ 25700,
+ 27600,
+ 24800,
+ 24500,
+ "NA",
+ 25400,
+ 25300,
+ 24500,
+ 24000,
+ 26100,
+ 25700,
+ 25300,
+ 25000,
+ 23300,
+ 24000,
+ 26100,
+ 26900,
+ 25200,
+ 23200,
+ 24400,
+ 26500,
+ 24600,
+ 23800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "width": 600
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,200",
+ "£24,700",
+ "£24,400",
+ "£25,600",
+ "£25,100",
+ "£25,500",
+ "£26,300",
+ "£25,300",
+ "£24,700",
+ "£24,600",
+ "£23,700",
+ "£25,200",
+ "£25,100",
+ "£23,900",
+ "£24,600",
+ "£24,700",
+ "£24,800",
+ "£25,400",
+ "£25,600",
+ "£26,900",
+ "£24,900",
+ "£24,400",
+ "£24,800",
+ "£26,100",
+ "£25,700",
+ "£24,800",
+ "£25,400",
+ "£23,800",
+ "£26,000",
+ "£23,800",
+ "£25,300",
+ "£25,300",
+ "£24,300",
+ "£25,100"
+ ],
+ "footer": "44,015",
+ "na": "x",
+ "style": [
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#74A3CE"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ {
+ "background": "#9EBFDE"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#D0E1F0"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#5D93C6"
+ },
+ {
+ "background": "#AAC7E2"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#8BB2D7"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#D4E3F2"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ {
+ "background": "#D4E3F2"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#C1D6EB"
+ },
+ {
+ "background": "#A2C2DF"
+ }
+ ]
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,300",
+ "£23,600",
+ "£25,500",
+ "£24,500",
+ "£24,100",
+ "x",
+ "£28,100",
+ "£25,100",
+ "£23,300",
+ "x",
+ "£24,800",
+ "£25,400",
+ "£24,700",
+ "£26,700",
+ "x",
+ "£25,200",
+ "£23,100",
+ "£25,800",
+ "£24,900",
+ "£25,600",
+ "£23,900",
+ "£24,600",
+ "£24,600",
+ "£23,100",
+ "£23,800",
+ "£25,200",
+ "£26,000",
+ "£24,200",
+ "£25,500",
+ "£25,100",
+ "£23,500",
+ "£24,300",
+ "£24,600",
+ "£24,700"
+ ],
+ "footer": "39,080",
+ "na": "x",
+ "style": [
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#DCE8F5"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#C8DCED"
+ },
+ null,
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#E7F0F9"
+ },
+ null,
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#6499C8"
+ },
+ null,
+ {
+ "background": "#9EBFDE"
+ },
+ {
+ "background": "#EFF5FC"
+ },
+ {
+ "background": "#87B0D5"
+ },
+ {
+ "background": "#AAC7E2"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#D0E1F0"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#EFF5FC"
+ },
+ {
+ "background": "#D4E3F2"
+ },
+ {
+ "background": "#9EBFDE"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#DFEBF6"
+ },
+ {
+ "background": "#C1D6EB"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#B1CCE5"
+ }
+ ]
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,500",
+ "£24,700",
+ "£25,700",
+ "£26,400",
+ "£24,200",
+ "x",
+ "£23,800",
+ "£27,100",
+ "£26,000",
+ "x",
+ "£25,000",
+ "£26,600",
+ "£26,400",
+ "£25,100",
+ "£24,100",
+ "£23,400",
+ "£25,500",
+ "£25,400",
+ "£24,200",
+ "£23,300",
+ "£24,600",
+ "£25,600",
+ "£24,800",
+ "£25,600",
+ "£24,900",
+ "x",
+ "£25,000",
+ "£23,100",
+ "£25,000",
+ "£25,600",
+ "£25,400",
+ "£25,500",
+ "£24,400",
+ "£24,600"
+ ],
+ "footer": "36,835",
+ "na": "x",
+ "style": [
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#8BB2D7"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ null,
+ {
+ "background": "#D4E3F2"
+ },
+ {
+ "background": "#558EC3"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ null,
+ {
+ "background": "#A6C4E1"
+ },
+ {
+ "background": "#689BCA"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#C8DCED"
+ },
+ {
+ "background": "#E3EEF7"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#E7F0F9"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#AAC7E2"
+ },
+ null,
+ {
+ "background": "#A6C4E1"
+ },
+ {
+ "background": "#EFF5FC"
+ },
+ {
+ "background": "#A6C4E1"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#B5CFE6"
+ }
+ ]
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,100",
+ "£25,500",
+ "£24,500",
+ "£26,700",
+ "£24,200",
+ "£24,300",
+ "£26,800",
+ "£24,200",
+ "£26,400",
+ "x",
+ "£24,900",
+ "£24,000",
+ "£24,100",
+ "£24,800",
+ "x",
+ "£24,800",
+ "£25,300",
+ "£25,400",
+ "£25,200",
+ "£25,900",
+ "£24,300",
+ "x",
+ "£24,400",
+ "£26,000",
+ "x",
+ "£24,100",
+ "£23,600",
+ "£25,100",
+ "£27,000",
+ "£26,400",
+ "£27,300",
+ "£25,800",
+ "£26,000",
+ "£23,900"
+ ],
+ "footer": "38,100",
+ "na": "x",
+ "style": [
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#6499C8"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#C1D6EB"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ null,
+ {
+ "background": "#AAC7E2"
+ },
+ {
+ "background": "#CCDEEF"
+ },
+ {
+ "background": "#C8DCED"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ null,
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#9EBFDE"
+ },
+ {
+ "background": "#83ADD4"
+ },
+ {
+ "background": "#C1D6EB"
+ },
+ null,
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ null,
+ {
+ "background": "#C8DCED"
+ },
+ {
+ "background": "#DCE8F5"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#5991C4"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ {
+ "background": "#87B0D5"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ {
+ "background": "#D0E1F0"
+ }
+ ]
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,400",
+ "£24,400",
+ "£26,900",
+ "£24,400",
+ "£24,000",
+ "x",
+ "£25,100",
+ "£27,000",
+ "£24,300",
+ "x",
+ "£24,800",
+ "£26,500",
+ "£24,100",
+ "£23,400",
+ "x",
+ "x",
+ "£24,500",
+ "£24,500",
+ "£24,500",
+ "£26,400",
+ "£26,600",
+ "£25,900",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,300",
+ "£25,600",
+ "£23,100",
+ "£23,400",
+ "£23,700",
+ "x",
+ "£24,800",
+ "£25,600"
+ ],
+ "footer": "30,545",
+ "na": "x",
+ "style": [
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#5D93C6"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#CCDEEF"
+ },
+ null,
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#5991C4"
+ },
+ {
+ "background": "#C1D6EB"
+ },
+ null,
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#6C9ECB"
+ },
+ {
+ "background": "#C8DCED"
+ },
+ {
+ "background": "#E3EEF7"
+ },
+ null,
+ null,
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#689BCA"
+ },
+ {
+ "background": "#83ADD4"
+ },
+ null,
+ null,
+ null,
+ null,
+ {
+ "background": "#C1D6EB"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#EFF5FC"
+ },
+ {
+ "background": "#E3EEF7"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ null,
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#8FB5D8"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£22,900",
+ "£23,600",
+ "£24,100",
+ "£26,700",
+ "£25,700",
+ "£25,100",
+ "£23,800",
+ "£24,800",
+ "£25,100",
+ "£25,800",
+ "£26,400",
+ "£25,700",
+ "£27,600",
+ "£24,800",
+ "£24,500",
+ "x",
+ "£25,400",
+ "£25,300",
+ "£24,500",
+ "£24,000",
+ "£26,100",
+ "£25,700",
+ "£25,300",
+ "£25,000",
+ "£23,300",
+ "£24,000",
+ "£26,100",
+ "£26,900",
+ "£25,200",
+ "£23,200",
+ "£24,400",
+ "£26,500",
+ "£24,600",
+ "£23,800"
+ ],
+ "footer": "43,780",
+ "na": "x",
+ "style": [
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#DCE8F5"
+ },
+ {
+ "background": "#C8DCED"
+ },
+ {
+ "background": "#6499C8"
+ },
+ {
+ "background": "#8BB2D7"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#D4E3F2"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#87B0D5"
+ },
+ {
+ "background": "#70A0CD"
+ },
+ {
+ "background": "#8BB2D7"
+ },
+ {
+ "background": "#4281BC"
+ },
+ {
+ "background": "#ADCAE3"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ null,
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#B9D1E8"
+ },
+ {
+ "background": "#CCDEEF"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#8BB2D7"
+ },
+ {
+ "background": "#9ABDDC"
+ },
+ {
+ "background": "#A6C4E1"
+ },
+ {
+ "background": "#E7F0F9"
+ },
+ {
+ "background": "#CCDEEF"
+ },
+ {
+ "background": "#7BA8D1"
+ },
+ {
+ "background": "#5D93C6"
+ },
+ {
+ "background": "#9EBFDE"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#6C9ECB"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#D4E3F2"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_6.json b/tests/shinytest/testUI-current/industryBySubject_6.json
new file mode 100644
index 0000000..a303803
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_6.json
@@ -0,0 +1,589 @@
+{
+ "input": {
+ "countinput3": "ethnicity",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Mining and quarrying",
+ "YAGinput3": "1"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Mining and quarrying industry one year after\n graduation by the subject they studied and ethnicity, male and female first degree graduates from\n English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Mathematical sciences",
+ "Business and management",
+ "Creative arts and design",
+ "Economics",
+ "Geography, earth and environmental studies",
+ "Computing",
+ "Politics",
+ "Combined and general studies",
+ "Philosophy and religious studies",
+ "Sociology, social policy and anthropology",
+ "Materials and technology",
+ "Psychology",
+ "Education and teaching",
+ "Media, journalism and communications",
+ "English studies",
+ "Allied health",
+ "Agriculture, food and related studies",
+ "Architecture, building and planning",
+ "Sport and exercise sciences",
+ "Engineering"
+ ],
+ "White": [
+ 26300,
+ 26500,
+ 24800,
+ 25000,
+ 24600,
+ 26300,
+ 24900,
+ 24800,
+ 26000,
+ 24300,
+ 25400,
+ 24400,
+ 23200,
+ 25400,
+ 24400,
+ "NA",
+ 25300,
+ 26200,
+ 24600,
+ 27600
+ ],
+ "Black": [
+ "NA",
+ 24800,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 24000,
+ "NA",
+ "NA",
+ 25600,
+ 27100,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26300
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24700,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25300,
+ "NA",
+ "NA",
+ "NA",
+ 24900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "width": 600
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,300",
+ "£26,500",
+ "£24,800",
+ "£25,000",
+ "£24,600",
+ "£26,300",
+ "£24,900",
+ "£24,800",
+ "£26,000",
+ "£24,300",
+ "£25,400",
+ "£24,400",
+ "£23,200",
+ "£25,400",
+ "£24,400",
+ "x",
+ "£25,300",
+ "£26,200",
+ "£24,600",
+ "£27,600"
+ ],
+ "footer": "17,945",
+ "na": "x",
+ "style": [
+ {
+ "background": "#6A9CCA"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#AECAE4"
+ },
+ {
+ "background": "#A5C4E0"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#6A9CCA"
+ },
+ {
+ "background": "#A9C7E2"
+ },
+ {
+ "background": "#AECAE4"
+ },
+ {
+ "background": "#77A5CF"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#C0D6EA"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#C0D6EA"
+ },
+ null,
+ {
+ "background": "#97BBDB"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#2F75B5"
+ }
+ ]
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£24,800",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "footer": "1,110",
+ "na": "x",
+ "style": [
+ null,
+ {
+ "background": "#AECAE4"
+ },
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null
+ ]
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£24,000",
+ "x",
+ "x",
+ "£25,600",
+ "£27,100",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "footer": "4,225",
+ "na": "x",
+ "style": [
+ null,
+ {
+ "background": "#D2E2F1"
+ },
+ null,
+ null,
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#4584BD"
+ },
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null
+ ]
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,300"
+ ],
+ "footer": "1,455",
+ "na": "x",
+ "style": [
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ {
+ "background": "#6A9CCA"
+ }
+ ]
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "footer": "0",
+ "na": "x",
+ "style": [
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£24,700",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,300",
+ "x",
+ "x",
+ "x",
+ "£24,900"
+ ],
+ "footer": "5,325",
+ "na": "x",
+ "style": [
+ null,
+ {
+ "background": "#B2CDE5"
+ },
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ {
+ "background": "#97BBDB"
+ },
+ null,
+ null,
+ null,
+ {
+ "background": "#A9C7E2"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_7.json b/tests/shinytest/testUI-current/industryBySubject_7.json
new file mode 100644
index 0000000..ba4af16
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_7.json
@@ -0,0 +1,344 @@
+{
+ "input": {
+ "countinput3": "FSM",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Mining and quarrying",
+ "YAGinput3": "1"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Mining and quarrying industry one year after\n graduation by the subject they studied and FSM status, young (under 21 at start of course)\n male and female first degree graduates from English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Mathematical sciences",
+ "Business and management",
+ "Creative arts and design",
+ "Economics",
+ "Geography, earth and environmental studies",
+ "Computing",
+ "Politics",
+ "Combined and general studies",
+ "Philosophy and religious studies",
+ "Sociology, social policy and anthropology",
+ "Materials and technology",
+ "Psychology",
+ "Education and teaching",
+ "Media, journalism and communications",
+ "English studies",
+ "Allied health",
+ "Agriculture, food and related studies",
+ "Architecture, building and planning",
+ "Sport and exercise sciences",
+ "Engineering"
+ ],
+ "non-FSM": [
+ 23500,
+ 24600,
+ 25500,
+ 25100,
+ 23600,
+ 24900,
+ 23800,
+ "NA",
+ 23900,
+ 24100,
+ 25400,
+ "NA",
+ 25000,
+ "NA",
+ 24700,
+ "NA",
+ 24500,
+ "NA",
+ 25300,
+ 23400
+ ],
+ "FSM": [
+ "NA",
+ 25600,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26600,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 600
+ },
+ {
+ "accessor": "non-FSM",
+ "name": "non-FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,500",
+ "£24,600",
+ "£25,500",
+ "£25,100",
+ "£23,600",
+ "£24,900",
+ "£23,800",
+ "x",
+ "£23,900",
+ "£24,100",
+ "£25,400",
+ "x",
+ "£25,000",
+ "x",
+ "£24,700",
+ "x",
+ "£24,500",
+ "x",
+ "£25,300",
+ "£23,400"
+ ],
+ "footer": "20,280",
+ "na": "x",
+ "style": [
+ {
+ "background": "#EAF2FA"
+ },
+ {
+ "background": "#A8C6E1"
+ },
+ {
+ "background": "#71A1CD"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#E4EEF8"
+ },
+ {
+ "background": "#96BADB"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ null,
+ {
+ "background": "#D2E2F1"
+ },
+ {
+ "background": "#C6DAED"
+ },
+ {
+ "background": "#77A5CF"
+ },
+ null,
+ {
+ "background": "#8FB5D8"
+ },
+ null,
+ {
+ "background": "#A2C2DF"
+ },
+ null,
+ {
+ "background": "#AECAE4"
+ },
+ null,
+ {
+ "background": "#7DA9D2"
+ },
+ {
+ "background": "#F0F6FC"
+ }
+ ]
+ },
+ {
+ "accessor": "FSM",
+ "name": "FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£25,600",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "footer": "1,745",
+ "na": "x",
+ "style": [
+ null,
+ {
+ "background": "#6B9DCB"
+ },
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,600",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,300"
+ ],
+ "footer": "680",
+ "na": "x",
+ "style": [
+ null,
+ null,
+ null,
+ null,
+ {
+ "background": "#2F75B5"
+ },
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ null,
+ {
+ "background": "#F7FBFF"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_8.json b/tests/shinytest/testUI-current/industryBySubject_8.json
new file mode 100644
index 0000000..5fce34f
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_8.json
@@ -0,0 +1,606 @@
+{
+ "input": {
+ "countinput3": "FSM",
+ "earningsbutton2": "Median earnings",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Construction",
+ "YAGinput3": "1"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Construction industry one year after\n graduation by the subject they studied and FSM status, young (under 21 at start of course)\n male and female first degree graduates from English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Biosciences",
+ "Law",
+ "Politics",
+ "Languages and area studies",
+ "Physics and astronomy",
+ "General, applied and forensic sciences",
+ "Computing",
+ "Economics",
+ "English studies",
+ "Nursing and midwifery",
+ "Philosophy and religious studies",
+ "Engineering",
+ "Materials and technology",
+ "Architecture, building and planning",
+ "Psychology",
+ "Medical sciences",
+ "Mathematical sciences",
+ "Chemistry",
+ "Performing arts",
+ "Business and management",
+ "Allied health",
+ "Creative arts and design",
+ "Combined and general studies",
+ "Veterinary sciences",
+ "Agriculture, food and related studies",
+ "History and archaeology",
+ "Education and teaching",
+ "Sport and exercise sciences",
+ "Media, journalism and communications",
+ "Health and social care",
+ "Pharmacology, toxicology and pharmacy",
+ "Geography, earth and environmental studies",
+ "Sociology, social policy and anthropology"
+ ],
+ "non-FSM": [
+ 26600,
+ 24900,
+ 25500,
+ 25800,
+ 25100,
+ 24500,
+ 24600,
+ 25200,
+ 26100,
+ 24400,
+ 26000,
+ 26700,
+ 23500,
+ 25600,
+ 25900,
+ 22700,
+ 25400,
+ 24100,
+ 26100,
+ 23600,
+ 24200,
+ 26000,
+ 23800,
+ 24900,
+ 26600,
+ 25000,
+ 24000,
+ 26100,
+ 23800,
+ 24100,
+ 24900,
+ 25200,
+ 25200
+ ],
+ "FSM": [
+ 25100,
+ 25100,
+ 22800,
+ "NA",
+ "NA",
+ 25500,
+ 23600,
+ 25700,
+ 25700,
+ "NA",
+ 24800,
+ 25000,
+ 23500,
+ 25200,
+ 25600,
+ 24600,
+ 23700,
+ "NA",
+ 23800,
+ 26000,
+ 25500,
+ 24700,
+ "NA",
+ "NA",
+ 25000,
+ 25900,
+ 24600,
+ 26000,
+ 26200,
+ 24200,
+ "NA",
+ 25600,
+ 24900
+ ],
+ "Not known": [
+ 24000,
+ 23200,
+ "NA",
+ 23800,
+ "NA",
+ "NA",
+ 24000,
+ 25300,
+ 25800,
+ "NA",
+ "NA",
+ 24900,
+ 24800,
+ 24900,
+ 24700,
+ 24700,
+ "NA",
+ 24600,
+ 23500,
+ 27100,
+ 24000,
+ 25800,
+ 24400,
+ "NA",
+ 25400,
+ 24600,
+ 23700,
+ 25200,
+ 25700,
+ 24300,
+ "NA",
+ 25400,
+ 23300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 600
+ },
+ {
+ "accessor": "non-FSM",
+ "name": "non-FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,600",
+ "£24,900",
+ "£25,500",
+ "£25,800",
+ "£25,100",
+ "£24,500",
+ "£24,600",
+ "£25,200",
+ "£26,100",
+ "£24,400",
+ "£26,000",
+ "£26,700",
+ "£23,500",
+ "£25,600",
+ "£25,900",
+ "£22,700",
+ "£25,400",
+ "£24,100",
+ "£26,100",
+ "£23,600",
+ "£24,200",
+ "£26,000",
+ "£23,800",
+ "£24,900",
+ "£26,600",
+ "£25,000",
+ "£24,000",
+ "£26,100",
+ "£23,800",
+ "£24,100",
+ "£24,900",
+ "£25,200",
+ "£25,200"
+ ],
+ "footer": "38,495",
+ "na": "x",
+ "style": [
+ {
+ "background": "#4584BD"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#77A5CF"
+ },
+ {
+ "background": "#6A9CCA"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#A5C4E0"
+ },
+ {
+ "background": "#A0C1DF"
+ },
+ {
+ "background": "#85AED4"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#A9C7E2"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#4181BB"
+ },
+ {
+ "background": "#D2E2F1"
+ },
+ {
+ "background": "#73A2CE"
+ },
+ {
+ "background": "#6599C9"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#7CA8D1"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#CEDFEF"
+ },
+ {
+ "background": "#B2CDE5"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#4584BD"
+ },
+ {
+ "background": "#8EB4D8"
+ },
+ {
+ "background": "#BBD3E9"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#85AED4"
+ },
+ {
+ "background": "#85AED4"
+ }
+ ]
+ },
+ {
+ "accessor": "FSM",
+ "name": "FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,100",
+ "£25,100",
+ "£22,800",
+ "x",
+ "x",
+ "£25,500",
+ "£23,600",
+ "£25,700",
+ "£25,700",
+ "x",
+ "£24,800",
+ "£25,000",
+ "£23,500",
+ "£25,200",
+ "£25,600",
+ "£24,600",
+ "£23,700",
+ "x",
+ "£23,800",
+ "£26,000",
+ "£25,500",
+ "£24,700",
+ "x",
+ "x",
+ "£25,000",
+ "£25,900",
+ "£24,600",
+ "£26,000",
+ "£26,200",
+ "£24,200",
+ "x",
+ "£25,600",
+ "£24,900"
+ ],
+ "footer": "30,420",
+ "na": "x",
+ "style": [
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#89B1D6"
+ },
+ {
+ "background": "#F2F7FD"
+ },
+ null,
+ null,
+ {
+ "background": "#77A5CF"
+ },
+ {
+ "background": "#CEDFEF"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ null,
+ {
+ "background": "#97BBDB"
+ },
+ {
+ "background": "#8EB4D8"
+ },
+ {
+ "background": "#D2E2F1"
+ },
+ {
+ "background": "#85AED4"
+ },
+ {
+ "background": "#73A2CE"
+ },
+ {
+ "background": "#A0C1DF"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ null,
+ {
+ "background": "#C5D9EC"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#77A5CF"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ null,
+ {
+ "background": "#8EB4D8"
+ },
+ {
+ "background": "#6599C9"
+ },
+ {
+ "background": "#A0C1DF"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#5790C4"
+ },
+ {
+ "background": "#B2CDE5"
+ },
+ null,
+ {
+ "background": "#73A2CE"
+ },
+ {
+ "background": "#93B8DA"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,000",
+ "£23,200",
+ "x",
+ "£23,800",
+ "x",
+ "x",
+ "£24,000",
+ "£25,300",
+ "£25,800",
+ "x",
+ "x",
+ "£24,900",
+ "£24,800",
+ "£24,900",
+ "£24,700",
+ "£24,700",
+ "x",
+ "£24,600",
+ "£23,500",
+ "£27,100",
+ "£24,000",
+ "£25,800",
+ "£24,400",
+ "x",
+ "£25,400",
+ "£24,600",
+ "£23,700",
+ "£25,200",
+ "£25,700",
+ "£24,300",
+ "x",
+ "£25,400",
+ "£23,300"
+ ],
+ "footer": "26,615",
+ "na": "x",
+ "style": [
+ {
+ "background": "#BBD3E9"
+ },
+ {
+ "background": "#E0EBF6"
+ },
+ null,
+ {
+ "background": "#C5D9EC"
+ },
+ null,
+ null,
+ {
+ "background": "#BBD3E9"
+ },
+ {
+ "background": "#80ABD3"
+ },
+ {
+ "background": "#6A9CCA"
+ },
+ null,
+ null,
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#97BBDB"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ {
+ "background": "#9CBEDD"
+ },
+ null,
+ {
+ "background": "#A0C1DF"
+ },
+ {
+ "background": "#D2E2F1"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#BBD3E9"
+ },
+ {
+ "background": "#6A9CCA"
+ },
+ {
+ "background": "#A9C7E2"
+ },
+ null,
+ {
+ "background": "#7CA8D1"
+ },
+ {
+ "background": "#A0C1DF"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#85AED4"
+ },
+ {
+ "background": "#6E9FCC"
+ },
+ {
+ "background": "#AECAE4"
+ },
+ null,
+ {
+ "background": "#7CA8D1"
+ },
+ {
+ "background": "#DBE8F4"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryBySubject_9.json b/tests/shinytest/testUI-current/industryBySubject_9.json
new file mode 100644
index 0000000..11cdbe6
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryBySubject_9.json
@@ -0,0 +1,606 @@
+{
+ "input": {
+ "countinput3": "FSM",
+ "earningsbutton2": "Proportions",
+ "navbar": "industryBySubject",
+ "qualinput4": "First degree",
+ "sectionnameinput2": "Construction",
+ "YAGinput3": "1"
+ },
+ "output": {
+ "backwards_crosstab_title": "Graduates working in the Construction industry one year after\n graduation by the subject they studied and FSM status, young (under 21 at start of course)\n male and female first degree graduates from English HEIs, APs and FECs, 2018/19 tax year.<\/h4>",
+ "crosstab_backwards": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "subject_name": [
+ "Biosciences",
+ "Law",
+ "Politics",
+ "Languages and area studies",
+ "Physics and astronomy",
+ "General, applied and forensic sciences",
+ "Computing",
+ "Economics",
+ "English studies",
+ "Nursing and midwifery",
+ "Philosophy and religious studies",
+ "Engineering",
+ "Materials and technology",
+ "Architecture, building and planning",
+ "Psychology",
+ "Medical sciences",
+ "Mathematical sciences",
+ "Chemistry",
+ "Performing arts",
+ "Business and management",
+ "Allied health",
+ "Creative arts and design",
+ "Combined and general studies",
+ "Veterinary sciences",
+ "Agriculture, food and related studies",
+ "History and archaeology",
+ "Education and teaching",
+ "Sport and exercise sciences",
+ "Media, journalism and communications",
+ "Health and social care",
+ "Pharmacology, toxicology and pharmacy",
+ "Geography, earth and environmental studies",
+ "Sociology, social policy and anthropology"
+ ],
+ "non-FSM": [
+ 0.00464995453955059,
+ 0.0148071178075075,
+ 0.030861150798805,
+ 0.00238992076893103,
+ 0.0220548123132874,
+ 0.0581633978438758,
+ 0.0503701779451877,
+ 0.0519807767242499,
+ 0.0474087543836862,
+ 0.027587998441356,
+ 0.0316404727886739,
+ 0.0271204052474347,
+ 0.000129886998311469,
+ 0.00948175087673724,
+ 0.0428107546434602,
+ 0.0566047538641382,
+ 0.0789972723730355,
+ 0.0123912196389141,
+ 0.00872840628653072,
+ 0.0481361215742304,
+ 0.01574230419535,
+ 0.0516690479283024,
+ 0.00257176256656709,
+ 0.0501623587478893,
+ 0.0696194310949474,
+ 0.0274840888427068,
+ 0.000805299389531108,
+ 0.0315365631900247,
+ 0.0320561111832706,
+ 0.0257695804649955,
+ 0.00849460968957007,
+ 0.00568905052604234,
+ 0.0520846863228991
+ ],
+ "FSM": [
+ 0.0381644258900102,
+ 0.0508201571282995,
+ 0.0194602412806943,
+ "NA",
+ "NA",
+ 0.00756056671378324,
+ 0.0570658426744683,
+ 0.017619407646034,
+ 0.00683738207159528,
+ "NA",
+ 0.0596627329805069,
+ 0.0467111534795043,
+ 0.0458236086913645,
+ 0.0339896781828342,
+ 0.0787942539692975,
+ 0.026429111469051,
+ 0.0351073271753065,
+ "NA",
+ 0.0415173728674271,
+ 0.039873771407909,
+ 0.0280398408993787,
+ 0.00568686104993261,
+ "NA",
+ "NA",
+ 0.00617994148778804,
+ 0.0730087768317938,
+ 0.0841195226981362,
+ 0.0198218336017882,
+ 0.0154169816902797,
+ 0.054041615988955,
+ "NA",
+ 0.0423720456263765,
+ 0.0658755464974853
+ ],
+ "Not known": [
+ 0.0238945035127926,
+ 0.0265244016981628,
+ "NA",
+ 0.0409512717436225,
+ "NA",
+ "NA",
+ 0.0257730022166285,
+ 0.0332118570838186,
+ 0.0465116279069767,
+ "NA",
+ "NA",
+ 0.0866739301949882,
+ 0.00432054701882256,
+ 0.0826163729947026,
+ 0.0568433707780742,
+ 0.0325355975504377,
+ "NA",
+ 0.0132246308750047,
+ 0.0486155464552729,
+ 0.0262238419055491,
+ 0.051808994251794,
+ 0.0336251267986625,
+ 0.00901679377841229,
+ "NA",
+ 0.0411015516399294,
+ 0.0975316527031596,
+ 0.0162677987752188,
+ 0.013713040538002,
+ 0.0752902280497426,
+ 0.0230303941090281,
+ "NA",
+ 0.0274260810760041,
+ 0.0632678363451929
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "subject_name",
+ "name": "Subject area",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 600
+ },
+ {
+ "accessor": "non-FSM",
+ "name": "non-FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "0.5%",
+ "1.5%",
+ "3.1%",
+ "0.2%",
+ "2.2%",
+ "5.8%",
+ "5.0%",
+ "5.2%",
+ "4.7%",
+ "2.8%",
+ "3.2%",
+ "2.7%",
+ "0.0%",
+ "0.9%",
+ "4.3%",
+ "5.7%",
+ "7.9%",
+ "1.2%",
+ "0.9%",
+ "4.8%",
+ "1.6%",
+ "5.2%",
+ "0.3%",
+ "5.0%",
+ "7.0%",
+ "2.7%",
+ "0.1%",
+ "3.2%",
+ "3.2%",
+ "2.6%",
+ "0.8%",
+ "0.6%",
+ "5.2%"
+ ],
+ "footer": "38,495",
+ "na": "x",
+ "style": [
+ {
+ "background": "#EDF4FB"
+ },
+ {
+ "background": "#D8E6F3"
+ },
+ {
+ "background": "#B7D0E7"
+ },
+ {
+ "background": "#F2F7FD"
+ },
+ {
+ "background": "#C9DCEE"
+ },
+ {
+ "background": "#7FABD2"
+ },
+ {
+ "background": "#8FB5D8"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#95B9DB"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#B6CFE7"
+ },
+ {
+ "background": "#BFD5EA"
+ },
+ {
+ "background": "#F7FBFF"
+ },
+ {
+ "background": "#E3EEF7"
+ },
+ {
+ "background": "#9FC0DE"
+ },
+ {
+ "background": "#83ADD4"
+ },
+ {
+ "background": "#558EC3"
+ },
+ {
+ "background": "#DDEAF5"
+ },
+ {
+ "background": "#E5EFF8"
+ },
+ {
+ "background": "#94B8DA"
+ },
+ {
+ "background": "#D6E5F3"
+ },
+ {
+ "background": "#8DB4D7"
+ },
+ {
+ "background": "#F1F7FD"
+ },
+ {
+ "background": "#90B6D8"
+ },
+ {
+ "background": "#689BCA"
+ },
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#F5FAFE"
+ },
+ {
+ "background": "#B6CFE7"
+ },
+ {
+ "background": "#B5CFE6"
+ },
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#E5EFF8"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ {
+ "background": "#8CB3D7"
+ }
+ ]
+ },
+ {
+ "accessor": "FSM",
+ "name": "FSM",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "3.8%",
+ "5.1%",
+ "1.9%",
+ "x",
+ "x",
+ "0.8%",
+ "5.7%",
+ "1.8%",
+ "0.7%",
+ "x",
+ "6.0%",
+ "4.7%",
+ "4.6%",
+ "3.4%",
+ "7.9%",
+ "2.6%",
+ "3.5%",
+ "x",
+ "4.2%",
+ "4.0%",
+ "2.8%",
+ "0.6%",
+ "x",
+ "x",
+ "0.6%",
+ "7.3%",
+ "8.4%",
+ "2.0%",
+ "1.5%",
+ "5.4%",
+ "x",
+ "4.2%",
+ "6.6%"
+ ],
+ "footer": "30,420",
+ "na": "x",
+ "style": [
+ {
+ "background": "#A8C6E2"
+ },
+ {
+ "background": "#8EB5D8"
+ },
+ {
+ "background": "#CFE0F0"
+ },
+ null,
+ null,
+ {
+ "background": "#E7F0F9"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#D3E2F1"
+ },
+ {
+ "background": "#E9F1F9"
+ },
+ null,
+ {
+ "background": "#7CA9D1"
+ },
+ {
+ "background": "#97BADB"
+ },
+ {
+ "background": "#99BCDC"
+ },
+ {
+ "background": "#B1CCE5"
+ },
+ {
+ "background": "#558EC3"
+ },
+ {
+ "background": "#C0D6EB"
+ },
+ {
+ "background": "#AFCAE4"
+ },
+ null,
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#A5C4E0"
+ },
+ {
+ "background": "#BDD4E9"
+ },
+ {
+ "background": "#EBF3FA"
+ },
+ null,
+ null,
+ {
+ "background": "#EAF2FA"
+ },
+ {
+ "background": "#6196C7"
+ },
+ {
+ "background": "#4A87BF"
+ },
+ {
+ "background": "#CEDFF0"
+ },
+ {
+ "background": "#D7E5F3"
+ },
+ {
+ "background": "#88B0D6"
+ },
+ null,
+ {
+ "background": "#A0C0DE"
+ },
+ {
+ "background": "#70A0CD"
+ }
+ ]
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "2.4%",
+ "2.7%",
+ "x",
+ "4.1%",
+ "x",
+ "x",
+ "2.6%",
+ "3.3%",
+ "4.7%",
+ "x",
+ "x",
+ "8.7%",
+ "0.4%",
+ "8.3%",
+ "5.7%",
+ "3.3%",
+ "x",
+ "1.3%",
+ "4.9%",
+ "2.6%",
+ "5.2%",
+ "3.4%",
+ "0.9%",
+ "x",
+ "4.1%",
+ "9.8%",
+ "1.6%",
+ "1.4%",
+ "7.5%",
+ "2.3%",
+ "x",
+ "2.7%",
+ "6.3%"
+ ],
+ "footer": "26,615",
+ "na": "x",
+ "style": [
+ {
+ "background": "#C6DAEC"
+ },
+ {
+ "background": "#C0D6EA"
+ },
+ null,
+ {
+ "background": "#A3C2DF"
+ },
+ null,
+ null,
+ {
+ "background": "#C2D7EB"
+ },
+ {
+ "background": "#B3CDE5"
+ },
+ {
+ "background": "#97BBDB"
+ },
+ null,
+ null,
+ {
+ "background": "#4583BD"
+ },
+ {
+ "background": "#EEF5FB"
+ },
+ {
+ "background": "#4D89C0"
+ },
+ {
+ "background": "#82ACD3"
+ },
+ {
+ "background": "#B4CEE6"
+ },
+ null,
+ {
+ "background": "#DCE8F5"
+ },
+ {
+ "background": "#93B8DA"
+ },
+ {
+ "background": "#C1D7EB"
+ },
+ {
+ "background": "#8CB3D7"
+ },
+ {
+ "background": "#B2CCE5"
+ },
+ {
+ "background": "#E4EEF8"
+ },
+ null,
+ {
+ "background": "#A2C2DF"
+ },
+ {
+ "background": "#2F75B5"
+ },
+ {
+ "background": "#D5E4F2"
+ },
+ {
+ "background": "#DBE8F4"
+ },
+ {
+ "background": "#5C93C5"
+ },
+ {
+ "background": "#C7DBED"
+ },
+ null,
+ {
+ "background": "#BED5EA"
+ },
+ {
+ "background": "#75A4CF"
+ }
+ ]
+ }
+ ],
+ "defaultPageSize": 37,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "800px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ }
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_1.json b/tests/shinytest/testUI-current/industryFlow_1.json
new file mode 100644
index 0000000..9c95ff6
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_1.json
@@ -0,0 +1,713 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "First degree",
+ "sexinput": "F+M"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 0,
+ 1,
+ 2,
+ 3,
+ 0,
+ 4,
+ 0,
+ 0,
+ 5,
+ 0,
+ 0,
+ 6,
+ 7,
+ 0,
+ 0,
+ 0,
+ 8,
+ 9,
+ 7,
+ 1,
+ 9,
+ 8,
+ 1,
+ 8,
+ 9,
+ 9,
+ 4,
+ 5,
+ 4,
+ 3,
+ 7,
+ 7,
+ 8,
+ 7,
+ 9,
+ 7,
+ 1,
+ 8,
+ 5,
+ 4,
+ 5,
+ 1,
+ 2,
+ 1,
+ 9,
+ 8,
+ 4,
+ 3,
+ 5,
+ 6,
+ 2,
+ 6,
+ 6,
+ 6,
+ 2,
+ 5,
+ 4,
+ 1,
+ 1,
+ 7,
+ 7,
+ 3,
+ 2,
+ 3,
+ 8,
+ 6,
+ 6,
+ 2,
+ 6,
+ 9,
+ 3,
+ 2,
+ 3,
+ 4,
+ 6,
+ 1,
+ 1,
+ 8,
+ 2,
+ 8,
+ 3,
+ 5,
+ 9,
+ 4,
+ 4,
+ 2,
+ 2,
+ 5,
+ 9,
+ 3,
+ 9,
+ 5,
+ 8,
+ 6,
+ 7,
+ 7,
+ 4,
+ 3,
+ 10,
+ 17,
+ 10,
+ 10,
+ 19,
+ 12,
+ 10,
+ 10,
+ 13,
+ 10,
+ 18,
+ 10,
+ 14,
+ 16,
+ 10,
+ 10,
+ 15,
+ 10,
+ 11,
+ 14,
+ 12,
+ 15,
+ 19,
+ 16,
+ 15,
+ 14,
+ 15,
+ 16,
+ 16,
+ 18,
+ 14,
+ 13,
+ 12,
+ 18,
+ 17,
+ 12,
+ 16,
+ 18,
+ 19,
+ 18,
+ 13,
+ 11,
+ 18,
+ 16,
+ 13,
+ 11,
+ 12,
+ 15,
+ 15,
+ 19,
+ 15,
+ 11,
+ 19,
+ 14,
+ 11,
+ 17,
+ 13,
+ 17,
+ 12,
+ 17,
+ 19,
+ 11,
+ 13,
+ 19,
+ 16,
+ 19,
+ 11,
+ 12,
+ 15,
+ 12,
+ 16,
+ 17,
+ 17,
+ 13,
+ 17,
+ 13,
+ 18,
+ 14,
+ 18,
+ 14,
+ 17,
+ 11,
+ 11,
+ 15,
+ 18,
+ 18,
+ 14,
+ 12,
+ 14,
+ 15,
+ 19,
+ 12,
+ 13,
+ 13,
+ 19,
+ 16,
+ 16,
+ 11,
+ 17
+ ],
+ "target": [
+ 10,
+ 11,
+ 10,
+ 10,
+ 10,
+ 12,
+ 10,
+ 13,
+ 14,
+ 10,
+ 15,
+ 16,
+ 10,
+ 10,
+ 17,
+ 18,
+ 19,
+ 10,
+ 10,
+ 18,
+ 19,
+ 19,
+ 18,
+ 11,
+ 17,
+ 16,
+ 12,
+ 14,
+ 11,
+ 18,
+ 19,
+ 17,
+ 12,
+ 19,
+ 14,
+ 14,
+ 11,
+ 12,
+ 11,
+ 15,
+ 13,
+ 17,
+ 15,
+ 16,
+ 17,
+ 17,
+ 13,
+ 11,
+ 18,
+ 19,
+ 14,
+ 18,
+ 11,
+ 18,
+ 13,
+ 17,
+ 13,
+ 19,
+ 14,
+ 18,
+ 19,
+ 13,
+ 17,
+ 13,
+ 14,
+ 16,
+ 15,
+ 19,
+ 14,
+ 16,
+ 18,
+ 15,
+ 11,
+ 11,
+ 17,
+ 17,
+ 16,
+ 13,
+ 12,
+ 15,
+ 14,
+ 16,
+ 18,
+ 13,
+ 16,
+ 12,
+ 19,
+ 12,
+ 16,
+ 11,
+ 13,
+ 15,
+ 12,
+ 15,
+ 12,
+ 15,
+ 16,
+ 15,
+ 12,
+ 20,
+ 20,
+ 21,
+ 22,
+ 20,
+ 20,
+ 23,
+ 24,
+ 20,
+ 25,
+ 20,
+ 26,
+ 20,
+ 20,
+ 27,
+ 28,
+ 20,
+ 29,
+ 20,
+ 21,
+ 25,
+ 23,
+ 23,
+ 26,
+ 27,
+ 28,
+ 25,
+ 22,
+ 27,
+ 21,
+ 22,
+ 27,
+ 24,
+ 29,
+ 23,
+ 26,
+ 25,
+ 23,
+ 28,
+ 26,
+ 25,
+ 25,
+ 22,
+ 29,
+ 29,
+ 22,
+ 21,
+ 21,
+ 24,
+ 25,
+ 28,
+ 24,
+ 21,
+ 29,
+ 26,
+ 27,
+ 24,
+ 21,
+ 23,
+ 26,
+ 22,
+ 27,
+ 28,
+ 27,
+ 24,
+ 24,
+ 21,
+ 22,
+ 22,
+ 29,
+ 28,
+ 22,
+ 24,
+ 21,
+ 29,
+ 22,
+ 27,
+ 26,
+ 24,
+ 27,
+ 25,
+ 28,
+ 29,
+ 29,
+ 25,
+ 28,
+ 25,
+ 28,
+ 24,
+ 26,
+ 29,
+ 27,
+ 23,
+ 26,
+ 26,
+ 23,
+ 21,
+ 23,
+ 28
+ ],
+ "value": [
+ 98760,
+ 16425,
+ 13845,
+ 13525,
+ 12965,
+ 12545,
+ 12005,
+ 11600,
+ 11400,
+ 11260,
+ 10830,
+ 9715,
+ 9600,
+ 9470,
+ 9400,
+ 8895,
+ 8065,
+ 7130,
+ 6060,
+ 4055,
+ 3360,
+ 3325,
+ 2865,
+ 2810,
+ 2770,
+ 2615,
+ 2600,
+ 2545,
+ 2520,
+ 2405,
+ 2325,
+ 2280,
+ 2215,
+ 2205,
+ 2170,
+ 2165,
+ 2145,
+ 2110,
+ 2090,
+ 2050,
+ 2035,
+ 1980,
+ 1895,
+ 1885,
+ 1850,
+ 1820,
+ 1810,
+ 1810,
+ 1745,
+ 1630,
+ 1540,
+ 1535,
+ 1525,
+ 1450,
+ 1390,
+ 1390,
+ 1305,
+ 1300,
+ 1265,
+ 1235,
+ 1220,
+ 1180,
+ 1175,
+ 1175,
+ 1140,
+ 1130,
+ 1025,
+ 1010,
+ 1005,
+ 990,
+ 955,
+ 950,
+ 915,
+ 855,
+ 850,
+ 805,
+ 795,
+ 785,
+ 745,
+ 745,
+ 725,
+ 725,
+ 700,
+ 695,
+ 685,
+ 520,
+ 480,
+ 475,
+ 445,
+ 335,
+ 305,
+ 300,
+ 255,
+ 235,
+ 215,
+ 195,
+ 190,
+ 70,
+ 25,
+ 112995,
+ 17525,
+ 16520,
+ 15625,
+ 12860,
+ 12745,
+ 12605,
+ 11995,
+ 11755,
+ 11635,
+ 11615,
+ 11560,
+ 11540,
+ 10500,
+ 9790,
+ 8705,
+ 6745,
+ 5015,
+ 4430,
+ 3420,
+ 2660,
+ 2445,
+ 2265,
+ 2180,
+ 2090,
+ 2055,
+ 2015,
+ 1980,
+ 1880,
+ 1870,
+ 1850,
+ 1795,
+ 1775,
+ 1695,
+ 1665,
+ 1615,
+ 1595,
+ 1555,
+ 1480,
+ 1480,
+ 1475,
+ 1460,
+ 1435,
+ 1355,
+ 1315,
+ 1275,
+ 1250,
+ 1200,
+ 1195,
+ 1185,
+ 1135,
+ 1035,
+ 1025,
+ 1010,
+ 985,
+ 975,
+ 965,
+ 910,
+ 910,
+ 905,
+ 875,
+ 845,
+ 840,
+ 815,
+ 815,
+ 810,
+ 770,
+ 760,
+ 755,
+ 735,
+ 685,
+ 655,
+ 655,
+ 510,
+ 505,
+ 480,
+ 470,
+ 455,
+ 440,
+ 385,
+ 375,
+ 320,
+ 260,
+ 245,
+ 215,
+ 205,
+ 185,
+ 180,
+ 170,
+ 170,
+ 170,
+ 145,
+ 125,
+ 110,
+ 110,
+ 105,
+ 100,
+ 30,
+ 10
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Other ",
+ "Accommodation and food service activities ",
+ "Transportation and storage ",
+ "Other service activities ",
+ "Education ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Public administration and defence - compulsory social security ",
+ "Manufacturing ",
+ "Construction ",
+ "Information and communication ",
+ "Other ",
+ "Transportation and storage ",
+ "Public administration and defence - compulsory social security ",
+ "Education ",
+ "Other service activities ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Construction ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Information and communication ",
+ "Other ",
+ "Public administration and defence - compulsory social security ",
+ "Education ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Construction ",
+ "Transportation and storage ",
+ "Manufacturing ",
+ "Information and communication ",
+ "Accommodation and food service activities ",
+ "Other service activities "
+ ],
+ "group": [
+ "Other ",
+ "Accommodation and food service activities ",
+ "Transportation and storage ",
+ "Other service activities ",
+ "Education ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Public administration and defence - compulsory social security ",
+ "Manufacturing ",
+ "Construction ",
+ "Information and communication ",
+ "Other ",
+ "Transportation and storage ",
+ "Public administration and defence - compulsory social security ",
+ "Education ",
+ "Other service activities ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Construction ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Information and communication ",
+ "Other ",
+ "Public administration and defence - compulsory social security ",
+ "Education ",
+ "Electricity, gas, steam and air conditioning supply ",
+ "Construction ",
+ "Transportation and storage ",
+ "Manufacturing ",
+ "Information and communication ",
+ "Accommodation and food service activities ",
+ "Other service activities "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), male and female first degree graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For both female and male, first degree graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Accommodation and food service activities (7.4%)<\/b>, and at five years after graduation it is Human health and social work activities (7.3%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Other <\/b>, where <\/b> 16,425 graduates move to Transportation and storage <\/b>. Between three and five\n years after graduation it's seen for Manufacturing <\/b> where 17,525 <\/b> graduates moved to Other <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_2.json b/tests/shinytest/testUI-current/industryFlow_2.json
new file mode 100644
index 0000000..4de4f34
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_2.json
@@ -0,0 +1,719 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "Level 7 (taught)",
+ "sexinput": "F+M"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 1,
+ 0,
+ 2,
+ 0,
+ 0,
+ 3,
+ 0,
+ 0,
+ 0,
+ 0,
+ 4,
+ 5,
+ 6,
+ 0,
+ 7,
+ 8,
+ 9,
+ 0,
+ 9,
+ 6,
+ 7,
+ 7,
+ 4,
+ 3,
+ 8,
+ 6,
+ 6,
+ 4,
+ 8,
+ 8,
+ 1,
+ 9,
+ 2,
+ 1,
+ 8,
+ 5,
+ 1,
+ 5,
+ 4,
+ 3,
+ 7,
+ 9,
+ 9,
+ 2,
+ 3,
+ 9,
+ 7,
+ 9,
+ 4,
+ 7,
+ 2,
+ 2,
+ 8,
+ 4,
+ 5,
+ 8,
+ 1,
+ 3,
+ 7,
+ 7,
+ 1,
+ 8,
+ 7,
+ 8,
+ 1,
+ 4,
+ 4,
+ 5,
+ 2,
+ 3,
+ 2,
+ 9,
+ 6,
+ 2,
+ 8,
+ 6,
+ 9,
+ 6,
+ 2,
+ 4,
+ 5,
+ 5,
+ 1,
+ 3,
+ 5,
+ 9,
+ 7,
+ 1,
+ 6,
+ 5,
+ 6,
+ 3,
+ 5,
+ 3,
+ 1,
+ 3,
+ 6,
+ 2,
+ 4,
+ 10,
+ 18,
+ 17,
+ 10,
+ 10,
+ 10,
+ 13,
+ 11,
+ 10,
+ 16,
+ 15,
+ 10,
+ 12,
+ 10,
+ 19,
+ 10,
+ 10,
+ 14,
+ 10,
+ 19,
+ 13,
+ 15,
+ 14,
+ 16,
+ 19,
+ 14,
+ 16,
+ 16,
+ 17,
+ 18,
+ 17,
+ 12,
+ 15,
+ 19,
+ 17,
+ 14,
+ 11,
+ 18,
+ 12,
+ 12,
+ 13,
+ 18,
+ 18,
+ 15,
+ 12,
+ 19,
+ 18,
+ 14,
+ 19,
+ 11,
+ 12,
+ 19,
+ 13,
+ 12,
+ 13,
+ 15,
+ 16,
+ 16,
+ 11,
+ 16,
+ 18,
+ 14,
+ 18,
+ 14,
+ 18,
+ 12,
+ 17,
+ 11,
+ 17,
+ 17,
+ 11,
+ 15,
+ 17,
+ 11,
+ 12,
+ 19,
+ 13,
+ 13,
+ 14,
+ 16,
+ 19,
+ 12,
+ 15,
+ 11,
+ 19,
+ 13,
+ 11,
+ 13,
+ 16,
+ 17,
+ 14,
+ 13,
+ 17,
+ 18,
+ 14,
+ 15,
+ 15,
+ 11,
+ 15,
+ 16
+ ],
+ "target": [
+ 10,
+ 10,
+ 11,
+ 10,
+ 12,
+ 13,
+ 10,
+ 14,
+ 15,
+ 16,
+ 17,
+ 10,
+ 10,
+ 10,
+ 18,
+ 10,
+ 10,
+ 10,
+ 19,
+ 12,
+ 14,
+ 19,
+ 13,
+ 17,
+ 12,
+ 18,
+ 17,
+ 15,
+ 13,
+ 19,
+ 12,
+ 15,
+ 14,
+ 19,
+ 12,
+ 11,
+ 14,
+ 13,
+ 19,
+ 12,
+ 18,
+ 16,
+ 15,
+ 13,
+ 12,
+ 16,
+ 19,
+ 12,
+ 11,
+ 16,
+ 17,
+ 15,
+ 17,
+ 17,
+ 14,
+ 17,
+ 15,
+ 19,
+ 11,
+ 11,
+ 18,
+ 16,
+ 14,
+ 15,
+ 16,
+ 17,
+ 19,
+ 18,
+ 11,
+ 16,
+ 13,
+ 13,
+ 17,
+ 18,
+ 11,
+ 13,
+ 11,
+ 18,
+ 13,
+ 14,
+ 11,
+ 12,
+ 13,
+ 18,
+ 14,
+ 15,
+ 16,
+ 14,
+ 11,
+ 12,
+ 18,
+ 16,
+ 17,
+ 16,
+ 19,
+ 14,
+ 15,
+ 19,
+ 18,
+ 15,
+ 20,
+ 20,
+ 20,
+ 21,
+ 22,
+ 23,
+ 20,
+ 20,
+ 24,
+ 20,
+ 20,
+ 25,
+ 20,
+ 26,
+ 20,
+ 27,
+ 28,
+ 20,
+ 29,
+ 29,
+ 26,
+ 23,
+ 25,
+ 28,
+ 23,
+ 21,
+ 22,
+ 26,
+ 21,
+ 29,
+ 23,
+ 23,
+ 24,
+ 24,
+ 28,
+ 28,
+ 29,
+ 21,
+ 28,
+ 26,
+ 25,
+ 24,
+ 28,
+ 29,
+ 25,
+ 27,
+ 26,
+ 27,
+ 28,
+ 24,
+ 29,
+ 22,
+ 22,
+ 24,
+ 29,
+ 27,
+ 21,
+ 23,
+ 28,
+ 27,
+ 23,
+ 23,
+ 25,
+ 22,
+ 22,
+ 27,
+ 26,
+ 22,
+ 25,
+ 29,
+ 27,
+ 26,
+ 27,
+ 21,
+ 22,
+ 26,
+ 27,
+ 23,
+ 29,
+ 24,
+ 21,
+ 21,
+ 22,
+ 26,
+ 25,
+ 24,
+ 25,
+ 28,
+ 29,
+ 22,
+ 24,
+ 21,
+ 24,
+ 27,
+ 26,
+ 21,
+ 28,
+ 23,
+ 25,
+ 25
+ ],
+ "value": [
+ 76805,
+ 17960,
+ 16030,
+ 13890,
+ 13875,
+ 13755,
+ 13635,
+ 12315,
+ 11960,
+ 11810,
+ 11390,
+ 11260,
+ 10525,
+ 9890,
+ 9050,
+ 7935,
+ 7875,
+ 6520,
+ 5675,
+ 3770,
+ 2985,
+ 2915,
+ 2675,
+ 2620,
+ 2570,
+ 2555,
+ 2515,
+ 2420,
+ 2400,
+ 2355,
+ 2340,
+ 2250,
+ 2250,
+ 2225,
+ 2215,
+ 2165,
+ 2045,
+ 2020,
+ 1955,
+ 1945,
+ 1920,
+ 1900,
+ 1885,
+ 1865,
+ 1830,
+ 1825,
+ 1765,
+ 1665,
+ 1665,
+ 1650,
+ 1645,
+ 1605,
+ 1605,
+ 1530,
+ 1515,
+ 1440,
+ 1425,
+ 1400,
+ 1390,
+ 1375,
+ 1190,
+ 1180,
+ 1135,
+ 1105,
+ 1080,
+ 1065,
+ 1050,
+ 1015,
+ 1010,
+ 1000,
+ 990,
+ 955,
+ 910,
+ 895,
+ 895,
+ 835,
+ 815,
+ 775,
+ 775,
+ 655,
+ 650,
+ 605,
+ 590,
+ 535,
+ 465,
+ 390,
+ 390,
+ 385,
+ 385,
+ 365,
+ 360,
+ 345,
+ 290,
+ 245,
+ 160,
+ 125,
+ 105,
+ 65,
+ 55,
+ 45,
+ 94495,
+ 17985,
+ 15080,
+ 15045,
+ 14730,
+ 14530,
+ 13925,
+ 11920,
+ 11670,
+ 10885,
+ 10360,
+ 9415,
+ 9385,
+ 8695,
+ 8320,
+ 8070,
+ 7585,
+ 7570,
+ 7385,
+ 2710,
+ 2620,
+ 2500,
+ 2325,
+ 2305,
+ 2205,
+ 2090,
+ 2075,
+ 2055,
+ 1990,
+ 1950,
+ 1845,
+ 1845,
+ 1835,
+ 1825,
+ 1815,
+ 1805,
+ 1785,
+ 1785,
+ 1775,
+ 1770,
+ 1695,
+ 1670,
+ 1570,
+ 1530,
+ 1465,
+ 1405,
+ 1360,
+ 1310,
+ 1310,
+ 1260,
+ 1255,
+ 1255,
+ 1215,
+ 1200,
+ 1185,
+ 1175,
+ 1100,
+ 1075,
+ 1035,
+ 1000,
+ 975,
+ 950,
+ 950,
+ 950,
+ 875,
+ 860,
+ 745,
+ 705,
+ 685,
+ 620,
+ 600,
+ 560,
+ 555,
+ 550,
+ 550,
+ 470,
+ 470,
+ 465,
+ 465,
+ 455,
+ 395,
+ 395,
+ 385,
+ 355,
+ 310,
+ 305,
+ 280,
+ 275,
+ 235,
+ 200,
+ 200,
+ 195,
+ 185,
+ 170,
+ 125,
+ 80,
+ 65,
+ 35,
+ 25,
+ 10
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Other ",
+ "Education ",
+ "Information and communication ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Public administration and defence - compulsory social security ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Other ",
+ "Education ",
+ "Public administration and defence - compulsory social security ",
+ "Information and communication ",
+ "Financial and insurance activities ",
+ "Accommodation and food service activities ",
+ "Professional, scientific and technical activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Public administration and defence - compulsory social security ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Information and communication ",
+ "Financial and insurance activities "
+ ],
+ "group": [
+ "Other ",
+ "Education ",
+ "Information and communication ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Public administration and defence - compulsory social security ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Other ",
+ "Education ",
+ "Public administration and defence - compulsory social security ",
+ "Information and communication ",
+ "Financial and insurance activities ",
+ "Accommodation and food service activities ",
+ "Professional, scientific and technical activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Public administration and defence - compulsory social security ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Manufacturing ",
+ "Accommodation and food service activities ",
+ "Information and communication ",
+ "Financial and insurance activities "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), male and female level 7 (taught) graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For both female and male, level 7 (taught) graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Education (7.4%)<\/b>, and at five years after graduation it is Administrative and support service activities (7%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Education <\/b>, where <\/b> 17,960 graduates move to Other <\/b>. Between three and five\n years after graduation it's seen for Wholesale and retail trade - repair of motor vehicles and motorcycles <\/b> where 17,985 <\/b> graduates moved to Other <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_3.json b/tests/shinytest/testUI-current/industryFlow_3.json
new file mode 100644
index 0000000..6a7fd1e
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_3.json
@@ -0,0 +1,521 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "Level 7 (research)",
+ "sexinput": "F+M"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 1,
+ 2,
+ 3,
+ 2,
+ 0,
+ 4,
+ 5,
+ 6,
+ 1,
+ 7,
+ 0,
+ 8,
+ 5,
+ 7,
+ 2,
+ 6,
+ 0,
+ 7,
+ 4,
+ 5,
+ 7,
+ 9,
+ 1,
+ 1,
+ 3,
+ 1,
+ 9,
+ 9,
+ 5,
+ 2,
+ 5,
+ 6,
+ 1,
+ 7,
+ 3,
+ 7,
+ 7,
+ 0,
+ 4,
+ 9,
+ 9,
+ 4,
+ 1,
+ 1,
+ 7,
+ 9,
+ 4,
+ 2,
+ 3,
+ 4,
+ 9,
+ 7,
+ 9,
+ 8,
+ 6,
+ 5,
+ 1,
+ 3,
+ 6,
+ 0,
+ 8,
+ 3,
+ 6,
+ 9,
+ 2,
+ 5,
+ 1,
+ 8,
+ 7,
+ 10,
+ 17,
+ 15,
+ 11,
+ 17,
+ 10,
+ 12,
+ 10,
+ 15,
+ 12,
+ 14,
+ 10,
+ 12,
+ 10,
+ 19,
+ 11,
+ 10,
+ 16,
+ 11,
+ 13,
+ 11,
+ 13,
+ 16,
+ 17,
+ 18,
+ 17,
+ 17,
+ 12,
+ 10,
+ 17,
+ 15,
+ 19,
+ 16,
+ 15,
+ 17,
+ 19,
+ 16,
+ 15,
+ 13,
+ 17,
+ 19,
+ 12,
+ 18,
+ 12,
+ 11,
+ 14,
+ 16,
+ 10,
+ 13,
+ 13,
+ 18,
+ 14,
+ 18,
+ 15,
+ 11,
+ 16,
+ 15,
+ 12,
+ 10,
+ 12,
+ 15,
+ 16,
+ 10,
+ 17
+ ],
+ "target": [
+ 10,
+ 10,
+ 10,
+ 11,
+ 12,
+ 13,
+ 11,
+ 11,
+ 14,
+ 11,
+ 13,
+ 15,
+ 16,
+ 17,
+ 18,
+ 16,
+ 16,
+ 12,
+ 12,
+ 12,
+ 19,
+ 10,
+ 17,
+ 12,
+ 18,
+ 16,
+ 17,
+ 13,
+ 11,
+ 18,
+ 17,
+ 10,
+ 10,
+ 14,
+ 15,
+ 14,
+ 17,
+ 14,
+ 18,
+ 19,
+ 14,
+ 10,
+ 16,
+ 15,
+ 19,
+ 11,
+ 12,
+ 15,
+ 18,
+ 17,
+ 13,
+ 16,
+ 19,
+ 18,
+ 10,
+ 11,
+ 16,
+ 13,
+ 18,
+ 17,
+ 17,
+ 11,
+ 13,
+ 15,
+ 15,
+ 11,
+ 12,
+ 16,
+ 13,
+ 16,
+ 20,
+ 20,
+ 20,
+ 20,
+ 21,
+ 22,
+ 21,
+ 23,
+ 22,
+ 24,
+ 25,
+ 25,
+ 20,
+ 26,
+ 27,
+ 25,
+ 28,
+ 20,
+ 29,
+ 25,
+ 23,
+ 26,
+ 21,
+ 28,
+ 29,
+ 22,
+ 29,
+ 22,
+ 27,
+ 26,
+ 23,
+ 22,
+ 22,
+ 24,
+ 27,
+ 20,
+ 27,
+ 25,
+ 23,
+ 23,
+ 24,
+ 28,
+ 27,
+ 27,
+ 28,
+ 21,
+ 23,
+ 21,
+ 20,
+ 28,
+ 21,
+ 27,
+ 20,
+ 27,
+ 22,
+ 29,
+ 28,
+ 26,
+ 29,
+ 25,
+ 26,
+ 25,
+ 24,
+ 25
+ ],
+ "value": [
+ 11430,
+ 3730,
+ 2960,
+ 2545,
+ 2415,
+ 2245,
+ 2165,
+ 2065,
+ 2005,
+ 1995,
+ 1980,
+ 1950,
+ 1935,
+ 1925,
+ 1795,
+ 1760,
+ 1725,
+ 1700,
+ 1695,
+ 1690,
+ 1645,
+ 1645,
+ 1620,
+ 1570,
+ 1535,
+ 1520,
+ 1510,
+ 1470,
+ 1455,
+ 1425,
+ 1350,
+ 1320,
+ 1260,
+ 1230,
+ 1220,
+ 1215,
+ 1140,
+ 1105,
+ 1095,
+ 1040,
+ 970,
+ 960,
+ 950,
+ 950,
+ 855,
+ 845,
+ 725,
+ 705,
+ 695,
+ 695,
+ 675,
+ 670,
+ 660,
+ 650,
+ 605,
+ 590,
+ 555,
+ 540,
+ 470,
+ 410,
+ 350,
+ 350,
+ 305,
+ 225,
+ 190,
+ 135,
+ 130,
+ 65,
+ 25,
+ 20,
+ 15220,
+ 4155,
+ 3640,
+ 3630,
+ 3290,
+ 2820,
+ 2810,
+ 2760,
+ 2665,
+ 2590,
+ 2555,
+ 2280,
+ 2250,
+ 2095,
+ 2040,
+ 2000,
+ 1970,
+ 1945,
+ 1905,
+ 1775,
+ 1770,
+ 1715,
+ 1710,
+ 1615,
+ 1590,
+ 1485,
+ 1455,
+ 1415,
+ 1310,
+ 1285,
+ 1250,
+ 1245,
+ 1190,
+ 1115,
+ 1095,
+ 1065,
+ 1060,
+ 1020,
+ 805,
+ 795,
+ 760,
+ 750,
+ 685,
+ 680,
+ 620,
+ 615,
+ 580,
+ 540,
+ 525,
+ 515,
+ 495,
+ 335,
+ 335,
+ 310,
+ 260,
+ 245,
+ 240,
+ 200,
+ 195,
+ 160,
+ 160,
+ 105,
+ 75,
+ 60
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Human health and social work activities ",
+ "Manufacturing ",
+ "Arts, entertainment and recreation ",
+ "Education ",
+ "Information and communication ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Public administration and defence - compulsory social security ",
+ "Administrative and support service activities ",
+ "Other ",
+ "Public administration and defence - compulsory social security ",
+ "Administrative and support service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Manufacturing ",
+ "Information and communication ",
+ "Education ",
+ "Professional, scientific and technical activities ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Manufacturing ",
+ "Education ",
+ "Information and communication ",
+ "Arts, entertainment and recreation ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Human health and social work activities ",
+ "Administrative and support service activities ",
+ "Public administration and defence - compulsory social security "
+ ],
+ "group": [
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Human health and social work activities ",
+ "Manufacturing ",
+ "Arts, entertainment and recreation ",
+ "Education ",
+ "Information and communication ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Public administration and defence - compulsory social security ",
+ "Administrative and support service activities ",
+ "Other ",
+ "Public administration and defence - compulsory social security ",
+ "Administrative and support service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Manufacturing ",
+ "Information and communication ",
+ "Education ",
+ "Professional, scientific and technical activities ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Manufacturing ",
+ "Education ",
+ "Information and communication ",
+ "Arts, entertainment and recreation ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Human health and social work activities ",
+ "Administrative and support service activities ",
+ "Public administration and defence - compulsory social security "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), male and female level 7 (research) graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For both female and male, level 7 (research) graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Professional, scientific and technical activities (14.7%)<\/b>, and at five years after graduation it is Education (11.1%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Professional, scientific and technical activities <\/b>, where <\/b> 3,730 graduates move to Other <\/b>. Between three and five\n years after graduation it's seen for Professional, scientific and technical activities <\/b> where 4,155 <\/b> graduates moved to Other <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_4.json b/tests/shinytest/testUI-current/industryFlow_4.json
new file mode 100644
index 0000000..b65aa96
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_4.json
@@ -0,0 +1,635 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "Level 8",
+ "sexinput": "F+M"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 1,
+ 0,
+ 2,
+ 0,
+ 0,
+ 3,
+ 0,
+ 3,
+ 4,
+ 0,
+ 5,
+ 6,
+ 2,
+ 3,
+ 7,
+ 8,
+ 6,
+ 6,
+ 0,
+ 8,
+ 8,
+ 1,
+ 2,
+ 5,
+ 0,
+ 6,
+ 9,
+ 9,
+ 9,
+ 4,
+ 4,
+ 6,
+ 3,
+ 5,
+ 8,
+ 4,
+ 3,
+ 5,
+ 7,
+ 0,
+ 2,
+ 8,
+ 5,
+ 4,
+ 4,
+ 6,
+ 7,
+ 9,
+ 2,
+ 2,
+ 1,
+ 1,
+ 8,
+ 8,
+ 7,
+ 9,
+ 1,
+ 6,
+ 9,
+ 3,
+ 3,
+ 1,
+ 1,
+ 2,
+ 2,
+ 8,
+ 3,
+ 7,
+ 7,
+ 4,
+ 1,
+ 2,
+ 3,
+ 5,
+ 1,
+ 9,
+ 7,
+ 6,
+ 4,
+ 1,
+ 2,
+ 7,
+ 5,
+ 3,
+ 9,
+ 10,
+ 10,
+ 12,
+ 11,
+ 10,
+ 10,
+ 13,
+ 18,
+ 16,
+ 17,
+ 10,
+ 13,
+ 15,
+ 13,
+ 15,
+ 12,
+ 19,
+ 10,
+ 18,
+ 16,
+ 17,
+ 11,
+ 10,
+ 19,
+ 11,
+ 12,
+ 11,
+ 18,
+ 14,
+ 19,
+ 16,
+ 12,
+ 13,
+ 17,
+ 19,
+ 11,
+ 12,
+ 16,
+ 19,
+ 11,
+ 14,
+ 16,
+ 17,
+ 15,
+ 12,
+ 10,
+ 12,
+ 14,
+ 19,
+ 17,
+ 14,
+ 15,
+ 16,
+ 11,
+ 11,
+ 11,
+ 15,
+ 17,
+ 18,
+ 12,
+ 13,
+ 18,
+ 13,
+ 14,
+ 14,
+ 19,
+ 19,
+ 15,
+ 16,
+ 17,
+ 10,
+ 16,
+ 16,
+ 18,
+ 15,
+ 13,
+ 18,
+ 11,
+ 16,
+ 14,
+ 19,
+ 12,
+ 13,
+ 15,
+ 12,
+ 13
+ ],
+ "target": [
+ 10,
+ 10,
+ 11,
+ 10,
+ 12,
+ 13,
+ 10,
+ 14,
+ 15,
+ 11,
+ 16,
+ 17,
+ 12,
+ 16,
+ 16,
+ 17,
+ 10,
+ 11,
+ 17,
+ 18,
+ 16,
+ 14,
+ 18,
+ 12,
+ 13,
+ 19,
+ 10,
+ 13,
+ 11,
+ 15,
+ 10,
+ 12,
+ 18,
+ 19,
+ 18,
+ 11,
+ 17,
+ 13,
+ 19,
+ 10,
+ 15,
+ 11,
+ 12,
+ 15,
+ 16,
+ 15,
+ 13,
+ 12,
+ 10,
+ 18,
+ 17,
+ 16,
+ 12,
+ 13,
+ 15,
+ 16,
+ 12,
+ 15,
+ 16,
+ 18,
+ 14,
+ 11,
+ 17,
+ 19,
+ 13,
+ 15,
+ 18,
+ 12,
+ 13,
+ 19,
+ 14,
+ 14,
+ 14,
+ 17,
+ 11,
+ 11,
+ 16,
+ 18,
+ 19,
+ 13,
+ 13,
+ 19,
+ 11,
+ 12,
+ 18,
+ 14,
+ 20,
+ 21,
+ 20,
+ 20,
+ 22,
+ 23,
+ 20,
+ 20,
+ 20,
+ 24,
+ 24,
+ 25,
+ 20,
+ 22,
+ 21,
+ 24,
+ 26,
+ 25,
+ 26,
+ 26,
+ 27,
+ 26,
+ 27,
+ 20,
+ 27,
+ 28,
+ 23,
+ 23,
+ 23,
+ 29,
+ 25,
+ 29,
+ 29,
+ 21,
+ 27,
+ 28,
+ 21,
+ 28,
+ 25,
+ 25,
+ 25,
+ 23,
+ 22,
+ 29,
+ 22,
+ 28,
+ 27,
+ 21,
+ 21,
+ 26,
+ 20,
+ 22,
+ 22,
+ 24,
+ 22,
+ 21,
+ 23,
+ 23,
+ 27,
+ 23,
+ 26,
+ 24,
+ 24,
+ 24,
+ 29,
+ 24,
+ 22,
+ 28,
+ 21,
+ 20,
+ 26,
+ 24,
+ 29,
+ 22,
+ 24,
+ 27,
+ 21,
+ 29,
+ 27,
+ 22,
+ 23,
+ 25,
+ 23,
+ 25,
+ 26,
+ 21
+ ],
+ "value": [
+ 12820,
+ 8430,
+ 8240,
+ 6960,
+ 6120,
+ 4265,
+ 4125,
+ 3210,
+ 3025,
+ 3005,
+ 2890,
+ 2835,
+ 2770,
+ 2655,
+ 2585,
+ 2515,
+ 2415,
+ 2410,
+ 2360,
+ 2350,
+ 2285,
+ 2225,
+ 2205,
+ 2185,
+ 2185,
+ 2140,
+ 2120,
+ 1930,
+ 1870,
+ 1855,
+ 1685,
+ 1675,
+ 1675,
+ 1675,
+ 1635,
+ 1610,
+ 1590,
+ 1575,
+ 1540,
+ 1540,
+ 1535,
+ 1520,
+ 1510,
+ 1485,
+ 1445,
+ 1435,
+ 1370,
+ 1285,
+ 1270,
+ 1220,
+ 1215,
+ 1195,
+ 1120,
+ 1070,
+ 1060,
+ 1055,
+ 1015,
+ 1015,
+ 975,
+ 970,
+ 945,
+ 930,
+ 810,
+ 785,
+ 710,
+ 685,
+ 615,
+ 590,
+ 555,
+ 525,
+ 515,
+ 495,
+ 485,
+ 465,
+ 385,
+ 380,
+ 335,
+ 295,
+ 275,
+ 245,
+ 245,
+ 185,
+ 145,
+ 105,
+ 60,
+ 15,
+ 14715,
+ 11355,
+ 9715,
+ 7285,
+ 6655,
+ 5365,
+ 5085,
+ 4385,
+ 3425,
+ 3340,
+ 3030,
+ 2895,
+ 2815,
+ 2595,
+ 2580,
+ 2495,
+ 2485,
+ 2440,
+ 2350,
+ 2345,
+ 2305,
+ 2300,
+ 2215,
+ 2185,
+ 2105,
+ 1965,
+ 1935,
+ 1935,
+ 1925,
+ 1920,
+ 1875,
+ 1780,
+ 1705,
+ 1700,
+ 1635,
+ 1635,
+ 1595,
+ 1585,
+ 1575,
+ 1535,
+ 1390,
+ 1375,
+ 1345,
+ 1345,
+ 1325,
+ 1325,
+ 1310,
+ 1300,
+ 1300,
+ 1245,
+ 1110,
+ 1095,
+ 1055,
+ 1040,
+ 1000,
+ 910,
+ 890,
+ 870,
+ 765,
+ 640,
+ 625,
+ 590,
+ 585,
+ 575,
+ 465,
+ 400,
+ 400,
+ 400,
+ 355,
+ 315,
+ 315,
+ 310,
+ 290,
+ 285,
+ 285,
+ 285,
+ 280,
+ 260,
+ 225,
+ 205,
+ 185,
+ 170,
+ 140,
+ 105,
+ 80,
+ 10
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Information and communication ",
+ "Public administration and defence - compulsory social security ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Human health and social work activities ",
+ "Public administration and defence - compulsory social security ",
+ "Arts, entertainment and recreation ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Information and communication ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Information and communication ",
+ "Education ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Human health and social work activities ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Arts, entertainment and recreation ",
+ "Public administration and defence - compulsory social security "
+ ],
+ "group": [
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Information and communication ",
+ "Public administration and defence - compulsory social security ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Human health and social work activities ",
+ "Public administration and defence - compulsory social security ",
+ "Arts, entertainment and recreation ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Information and communication ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Information and communication ",
+ "Education ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Human health and social work activities ",
+ "Administrative and support service activities ",
+ "Manufacturing ",
+ "Arts, entertainment and recreation ",
+ "Public administration and defence - compulsory social security "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), male and female level 8 graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For both female and male, level 8 graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Education (11.2%)<\/b>, and at five years after graduation it is Professional, scientific and technical activities (12.9%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Professional, scientific and technical activities <\/b>, where <\/b> 8,430 graduates move to Other <\/b>. Between three and five\n years after graduation it's seen for Other <\/b> where 11,355 <\/b> graduates moved to Professional, scientific and technical activities <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_5.json b/tests/shinytest/testUI-current/industryFlow_5.json
new file mode 100644
index 0000000..3777feb
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_5.json
@@ -0,0 +1,551 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "Level 8",
+ "sexinput": "F"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 1,
+ 1,
+ 2,
+ 2,
+ 0,
+ 3,
+ 4,
+ 4,
+ 3,
+ 1,
+ 5,
+ 6,
+ 7,
+ 8,
+ 5,
+ 7,
+ 0,
+ 1,
+ 5,
+ 7,
+ 6,
+ 0,
+ 4,
+ 4,
+ 0,
+ 4,
+ 3,
+ 6,
+ 1,
+ 9,
+ 2,
+ 4,
+ 5,
+ 0,
+ 8,
+ 3,
+ 9,
+ 8,
+ 2,
+ 7,
+ 5,
+ 2,
+ 9,
+ 6,
+ 8,
+ 4,
+ 7,
+ 6,
+ 3,
+ 1,
+ 7,
+ 5,
+ 2,
+ 6,
+ 5,
+ 1,
+ 8,
+ 1,
+ 6,
+ 6,
+ 8,
+ 8,
+ 1,
+ 1,
+ 4,
+ 4,
+ 5,
+ 3,
+ 7,
+ 5,
+ 3,
+ 4,
+ 0,
+ 10,
+ 10,
+ 14,
+ 12,
+ 10,
+ 12,
+ 15,
+ 17,
+ 12,
+ 19,
+ 19,
+ 15,
+ 17,
+ 13,
+ 14,
+ 12,
+ 17,
+ 14,
+ 16,
+ 12,
+ 19,
+ 13,
+ 17,
+ 19,
+ 14,
+ 14,
+ 17,
+ 16,
+ 12,
+ 11,
+ 12,
+ 13,
+ 11,
+ 10,
+ 14,
+ 15,
+ 10,
+ 16,
+ 19,
+ 18,
+ 17,
+ 16,
+ 19,
+ 19,
+ 17,
+ 15,
+ 11,
+ 19,
+ 14,
+ 17,
+ 18,
+ 17,
+ 10,
+ 10,
+ 10,
+ 18,
+ 16,
+ 14,
+ 16,
+ 19,
+ 16,
+ 11,
+ 18,
+ 14,
+ 12,
+ 13,
+ 13,
+ 12,
+ 11,
+ 12
+ ],
+ "target": [
+ 10,
+ 10,
+ 11,
+ 12,
+ 13,
+ 14,
+ 14,
+ 10,
+ 14,
+ 10,
+ 15,
+ 15,
+ 16,
+ 13,
+ 17,
+ 14,
+ 12,
+ 12,
+ 13,
+ 18,
+ 19,
+ 17,
+ 11,
+ 18,
+ 19,
+ 19,
+ 17,
+ 17,
+ 11,
+ 16,
+ 16,
+ 14,
+ 16,
+ 11,
+ 17,
+ 12,
+ 15,
+ 12,
+ 15,
+ 19,
+ 17,
+ 10,
+ 10,
+ 14,
+ 18,
+ 19,
+ 13,
+ 14,
+ 14,
+ 16,
+ 14,
+ 18,
+ 13,
+ 11,
+ 19,
+ 19,
+ 12,
+ 16,
+ 19,
+ 13,
+ 12,
+ 14,
+ 10,
+ 17,
+ 18,
+ 11,
+ 15,
+ 12,
+ 19,
+ 16,
+ 17,
+ 12,
+ 12,
+ 18,
+ 20,
+ 21,
+ 20,
+ 20,
+ 22,
+ 23,
+ 24,
+ 25,
+ 26,
+ 20,
+ 27,
+ 20,
+ 23,
+ 20,
+ 24,
+ 22,
+ 24,
+ 28,
+ 24,
+ 25,
+ 26,
+ 28,
+ 29,
+ 23,
+ 23,
+ 27,
+ 28,
+ 26,
+ 29,
+ 26,
+ 27,
+ 27,
+ 21,
+ 23,
+ 22,
+ 21,
+ 29,
+ 27,
+ 29,
+ 29,
+ 20,
+ 20,
+ 25,
+ 22,
+ 21,
+ 27,
+ 22,
+ 21,
+ 25,
+ 27,
+ 23,
+ 22,
+ 27,
+ 28,
+ 26,
+ 27,
+ 22,
+ 21,
+ 25,
+ 24,
+ 21,
+ 23,
+ 22,
+ 26,
+ 28,
+ 22,
+ 23,
+ 21,
+ 20,
+ 24
+ ],
+ "value": [
+ 9515,
+ 7240,
+ 3840,
+ 3815,
+ 3345,
+ 2945,
+ 2870,
+ 2330,
+ 2295,
+ 2285,
+ 2255,
+ 2235,
+ 2205,
+ 2140,
+ 2045,
+ 1935,
+ 1910,
+ 1895,
+ 1865,
+ 1855,
+ 1845,
+ 1795,
+ 1780,
+ 1710,
+ 1660,
+ 1655,
+ 1555,
+ 1425,
+ 1385,
+ 1365,
+ 1355,
+ 1325,
+ 1325,
+ 1315,
+ 1305,
+ 1240,
+ 1240,
+ 1195,
+ 1180,
+ 1165,
+ 1145,
+ 1140,
+ 1105,
+ 1070,
+ 980,
+ 925,
+ 920,
+ 915,
+ 910,
+ 880,
+ 845,
+ 810,
+ 775,
+ 745,
+ 665,
+ 650,
+ 490,
+ 410,
+ 385,
+ 380,
+ 370,
+ 335,
+ 310,
+ 280,
+ 200,
+ 180,
+ 155,
+ 130,
+ 115,
+ 115,
+ 85,
+ 80,
+ 35,
+ 10,
+ 11045,
+ 7960,
+ 7540,
+ 5715,
+ 4895,
+ 3705,
+ 3535,
+ 3160,
+ 2795,
+ 2765,
+ 2695,
+ 2490,
+ 2405,
+ 2290,
+ 2245,
+ 2135,
+ 2105,
+ 2090,
+ 1995,
+ 1910,
+ 1695,
+ 1665,
+ 1650,
+ 1560,
+ 1540,
+ 1505,
+ 1460,
+ 1365,
+ 1325,
+ 1320,
+ 1305,
+ 1190,
+ 1145,
+ 1140,
+ 1135,
+ 1115,
+ 1110,
+ 1055,
+ 1035,
+ 995,
+ 970,
+ 965,
+ 960,
+ 960,
+ 940,
+ 925,
+ 915,
+ 905,
+ 850,
+ 835,
+ 740,
+ 735,
+ 710,
+ 675,
+ 670,
+ 670,
+ 665,
+ 595,
+ 565,
+ 540,
+ 505,
+ 485,
+ 465,
+ 435,
+ 420,
+ 200,
+ 175,
+ 70,
+ 65,
+ 20
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Other ",
+ "Education ",
+ "Other service activities ",
+ "Manufacturing ",
+ "Professional, scientific and technical activities ",
+ "Public administration and defence - compulsory social security ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Administrative and support service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other ",
+ "Other service activities ",
+ "Education ",
+ "Arts, entertainment and recreation ",
+ "Professional, scientific and technical activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Public administration and defence - compulsory social security ",
+ "Human health and social work activities ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Human health and social work activities ",
+ "Manufacturing ",
+ "Administrative and support service activities ",
+ "Other service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Public administration and defence - compulsory social security "
+ ],
+ "group": [
+ "Other ",
+ "Education ",
+ "Other service activities ",
+ "Manufacturing ",
+ "Professional, scientific and technical activities ",
+ "Public administration and defence - compulsory social security ",
+ "Human health and social work activities ",
+ "Arts, entertainment and recreation ",
+ "Administrative and support service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other ",
+ "Other service activities ",
+ "Education ",
+ "Arts, entertainment and recreation ",
+ "Professional, scientific and technical activities ",
+ "Manufacturing ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Public administration and defence - compulsory social security ",
+ "Human health and social work activities ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Human health and social work activities ",
+ "Manufacturing ",
+ "Administrative and support service activities ",
+ "Other service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Arts, entertainment and recreation ",
+ "Public administration and defence - compulsory social security "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), female level 8 graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For female, level 8 graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Education (17.3%)<\/b>, and at five years after graduation it is Professional, scientific and technical activities (11%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Education <\/b>, where <\/b> 7,240 graduates move to Other <\/b>. Between three and five\n years after graduation it's seen for Other <\/b> where 7,960 <\/b> graduates moved to Professional, scientific and technical activities <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/industryFlow_6.json b/tests/shinytest/testUI-current/industryFlow_6.json
new file mode 100644
index 0000000..d82bd4f
--- /dev/null
+++ b/tests/shinytest/testUI-current/industryFlow_6.json
@@ -0,0 +1,572 @@
+{
+ "input": {
+ "indflow.subjectinput": "All",
+ "navbar": "industryFlow",
+ "qualinput": "Level 8",
+ "sexinput": "M"
+ },
+ "output": {
+ "sankey": {
+ "x": {
+ "links": {
+ "source": [
+ 0,
+ 1,
+ 2,
+ 2,
+ 2,
+ 0,
+ 3,
+ 4,
+ 5,
+ 5,
+ 6,
+ 7,
+ 8,
+ 6,
+ 0,
+ 3,
+ 6,
+ 0,
+ 1,
+ 5,
+ 9,
+ 0,
+ 3,
+ 1,
+ 5,
+ 6,
+ 4,
+ 4,
+ 4,
+ 1,
+ 5,
+ 7,
+ 2,
+ 8,
+ 7,
+ 9,
+ 0,
+ 0,
+ 7,
+ 8,
+ 6,
+ 6,
+ 9,
+ 1,
+ 5,
+ 3,
+ 6,
+ 1,
+ 0,
+ 7,
+ 3,
+ 2,
+ 2,
+ 7,
+ 5,
+ 9,
+ 1,
+ 6,
+ 2,
+ 4,
+ 3,
+ 6,
+ 1,
+ 2,
+ 8,
+ 8,
+ 9,
+ 0,
+ 8,
+ 1,
+ 4,
+ 7,
+ 8,
+ 7,
+ 3,
+ 1,
+ 5,
+ 2,
+ 3,
+ 9,
+ 10,
+ 10,
+ 10,
+ 12,
+ 17,
+ 11,
+ 19,
+ 10,
+ 10,
+ 18,
+ 19,
+ 18,
+ 14,
+ 12,
+ 15,
+ 15,
+ 15,
+ 11,
+ 13,
+ 14,
+ 15,
+ 15,
+ 19,
+ 12,
+ 19,
+ 19,
+ 17,
+ 10,
+ 18,
+ 14,
+ 19,
+ 14,
+ 12,
+ 14,
+ 17,
+ 11,
+ 17,
+ 12,
+ 12,
+ 16,
+ 18,
+ 12,
+ 12,
+ 17,
+ 17,
+ 13,
+ 11,
+ 14,
+ 16,
+ 17,
+ 18,
+ 12,
+ 18,
+ 16,
+ 13,
+ 11,
+ 18,
+ 10,
+ 13,
+ 11,
+ 19,
+ 13,
+ 11,
+ 11,
+ 11,
+ 16,
+ 16,
+ 14,
+ 12,
+ 10,
+ 17
+ ],
+ "target": [
+ 10,
+ 10,
+ 10,
+ 11,
+ 12,
+ 13,
+ 14,
+ 15,
+ 11,
+ 12,
+ 16,
+ 13,
+ 15,
+ 10,
+ 12,
+ 11,
+ 17,
+ 16,
+ 18,
+ 19,
+ 11,
+ 11,
+ 17,
+ 11,
+ 13,
+ 15,
+ 18,
+ 19,
+ 10,
+ 16,
+ 18,
+ 14,
+ 14,
+ 10,
+ 10,
+ 19,
+ 19,
+ 18,
+ 17,
+ 18,
+ 12,
+ 13,
+ 13,
+ 12,
+ 14,
+ 16,
+ 18,
+ 19,
+ 17,
+ 16,
+ 19,
+ 18,
+ 13,
+ 12,
+ 16,
+ 15,
+ 15,
+ 14,
+ 15,
+ 12,
+ 18,
+ 11,
+ 14,
+ 19,
+ 13,
+ 17,
+ 10,
+ 14,
+ 19,
+ 13,
+ 13,
+ 11,
+ 11,
+ 19,
+ 12,
+ 17,
+ 10,
+ 17,
+ 13,
+ 17,
+ 20,
+ 21,
+ 22,
+ 20,
+ 20,
+ 20,
+ 20,
+ 23,
+ 24,
+ 20,
+ 21,
+ 25,
+ 20,
+ 26,
+ 24,
+ 27,
+ 20,
+ 26,
+ 20,
+ 28,
+ 22,
+ 21,
+ 24,
+ 21,
+ 22,
+ 28,
+ 28,
+ 29,
+ 26,
+ 21,
+ 25,
+ 23,
+ 27,
+ 24,
+ 21,
+ 23,
+ 25,
+ 28,
+ 24,
+ 21,
+ 24,
+ 29,
+ 25,
+ 29,
+ 22,
+ 25,
+ 29,
+ 22,
+ 29,
+ 24,
+ 28,
+ 23,
+ 27,
+ 28,
+ 24,
+ 24,
+ 22,
+ 27,
+ 21,
+ 25,
+ 23,
+ 22,
+ 22,
+ 28,
+ 21,
+ 22,
+ 24,
+ 29,
+ 22,
+ 26,
+ 23
+ ],
+ "value": [
+ 11290,
+ 9370,
+ 9195,
+ 8070,
+ 7535,
+ 3255,
+ 3180,
+ 2985,
+ 2930,
+ 2925,
+ 2705,
+ 2570,
+ 2520,
+ 2420,
+ 2300,
+ 2090,
+ 2070,
+ 1940,
+ 1810,
+ 1700,
+ 1665,
+ 1640,
+ 1610,
+ 1580,
+ 1535,
+ 1535,
+ 1505,
+ 1495,
+ 1480,
+ 1470,
+ 1425,
+ 1420,
+ 1365,
+ 1365,
+ 1365,
+ 1360,
+ 1305,
+ 1280,
+ 1245,
+ 1220,
+ 1190,
+ 1180,
+ 1170,
+ 1155,
+ 1150,
+ 1125,
+ 1100,
+ 1010,
+ 990,
+ 965,
+ 950,
+ 940,
+ 935,
+ 925,
+ 920,
+ 850,
+ 820,
+ 695,
+ 665,
+ 635,
+ 630,
+ 615,
+ 565,
+ 555,
+ 535,
+ 535,
+ 525,
+ 480,
+ 475,
+ 470,
+ 395,
+ 385,
+ 360,
+ 300,
+ 270,
+ 270,
+ 265,
+ 210,
+ 195,
+ 30,
+ 12390,
+ 8580,
+ 8570,
+ 8240,
+ 7725,
+ 6685,
+ 4100,
+ 3915,
+ 3845,
+ 3690,
+ 3130,
+ 3025,
+ 2535,
+ 2515,
+ 2195,
+ 2175,
+ 2060,
+ 2010,
+ 1965,
+ 1955,
+ 1940,
+ 1720,
+ 1670,
+ 1655,
+ 1635,
+ 1615,
+ 1590,
+ 1490,
+ 1480,
+ 1445,
+ 1425,
+ 1365,
+ 1205,
+ 1095,
+ 1080,
+ 1070,
+ 1070,
+ 1010,
+ 1000,
+ 965,
+ 955,
+ 900,
+ 850,
+ 840,
+ 785,
+ 715,
+ 680,
+ 675,
+ 650,
+ 590,
+ 540,
+ 515,
+ 485,
+ 430,
+ 420,
+ 405,
+ 405,
+ 330,
+ 330,
+ 285,
+ 275,
+ 275,
+ 200,
+ 170,
+ 165,
+ 105,
+ 40,
+ 40,
+ 15,
+ 10,
+ 10
+ ]
+ },
+ "nodes": {
+ "name": [
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Other ",
+ "Financial and insurance activities ",
+ "Arts, entertainment and recreation ",
+ "Human health and social work activities ",
+ "Information and communication ",
+ "Administrative and support service activities ",
+ "Other service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Information and communication ",
+ "Other service activities ",
+ "Human health and social work activities ",
+ "Other ",
+ "Information and communication ",
+ "Education ",
+ "Human health and social work activities ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Administrative and support service activities "
+ ],
+ "group": [
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Other ",
+ "Financial and insurance activities ",
+ "Arts, entertainment and recreation ",
+ "Human health and social work activities ",
+ "Information and communication ",
+ "Administrative and support service activities ",
+ "Other service activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other ",
+ "Professional, scientific and technical activities ",
+ "Education ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Administrative and support service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Information and communication ",
+ "Other service activities ",
+ "Human health and social work activities ",
+ "Other ",
+ "Information and communication ",
+ "Education ",
+ "Human health and social work activities ",
+ "Professional, scientific and technical activities ",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles ",
+ "Other service activities ",
+ "Arts, entertainment and recreation ",
+ "Financial and insurance activities ",
+ "Administrative and support service activities "
+ ]
+ },
+ "options": {
+ "NodeID": "name",
+ "NodeGroup": "name",
+ "LinkGroup": null,
+ "colourScale": "d3.scaleOrdinal(d3.schemeCategory20);",
+ "fontSize": 10,
+ "fontFamily": null,
+ "nodeWidth": 15,
+ "nodePadding": 20,
+ "units": "",
+ "margin": {
+ "top": null,
+ "right": null,
+ "bottom": null,
+ "left": null
+ },
+ "iterations": 32,
+ "sinksRight": true
+ }
+ },
+ "evals": [
+
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "sankey_title": "Industry of graduate employment for 2012/13 academic year graduates of all subjects one, three and five years after\n graduation (YAG), male level 8 graduates from English HEIs, APs and FECs, 2018/19 tax year<\/h3>",
+ "sankeytext1": "For male, level 8 graduates of all subjects, the industry with the highest\n proportion of graduates one year after graduation is Professional, scientific and technical activities (17.6%)<\/b>, and at five years after graduation it is Information and communication (14.5%)<\/b>.",
+ "sankeytext2": "The most movement between one and three years after graduation is seen for Professional, scientific and technical activities <\/b>, where <\/b> 11,290 graduates move to Other <\/b>. Between three and five\n years after graduation it's seen for Other <\/b> where 8,580 <\/b> graduates moved to Information and communication <\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_0.json b/tests/shinytest/testUI-current/regional_0.json
new file mode 100644
index 0000000..946cdbf
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_0.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "First degree",
+ "regions.subjectinput": "All",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of all subjects now working in Education who\n studied in each region five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For first degree graduates of all subjects in the Education industry five years after graduation, the region where\n the most graduates had studied was South East<\/b>. The region where the least graduates\n had studied was West Midlands<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was East of England<\/b> and the region with the\n least graduates lived was West Midlands<\/b>.",
+ "maptext2": "For first degree graduates of all subjects in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was East of England<\/b>, where the number of graduates increased by 15.5%<\/b>. The region with the largest decrease is South West<\/b> where the number of graduates decreased by -57.9%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_1.json b/tests/shinytest/testUI-current/regional_1.json
new file mode 100644
index 0000000..946cdbf
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_1.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "First degree",
+ "regions.subjectinput": "All",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of all subjects now working in Education who\n studied in each region five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For first degree graduates of all subjects in the Education industry five years after graduation, the region where\n the most graduates had studied was South East<\/b>. The region where the least graduates\n had studied was West Midlands<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was East of England<\/b> and the region with the\n least graduates lived was West Midlands<\/b>.",
+ "maptext2": "For first degree graduates of all subjects in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was East of England<\/b>, where the number of graduates increased by 15.5%<\/b>. The region with the largest decrease is South West<\/b> where the number of graduates decreased by -57.9%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_2.json b/tests/shinytest/testUI-current/regional_2.json
new file mode 100644
index 0000000..2ea393b
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_2.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "Level 7 (research)",
+ "regions.subjectinput": "All",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of all subjects now working in Education who\n studied in each region five years after\n graduation, male and female level 7 (research) graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For level 7 (research) graduates of all subjects in the Education industry five years after graduation, the region where\n the most graduates had studied was East of England<\/b>. The region where the least graduates\n had studied was East Midlands<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was East Midlands<\/b> and the region with the\n least graduates lived was North East<\/b>.",
+ "maptext2": "For level 7 (research) graduates of all subjects in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was East Midlands<\/b>, where the number of graduates increased by 115.6%<\/b>. The region with the largest decrease is East of England<\/b> where the number of graduates decreased by -64.7%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_3.json b/tests/shinytest/testUI-current/regional_3.json
new file mode 100644
index 0000000..2ea393b
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_3.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "Level 7 (research)",
+ "regions.subjectinput": "All",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of all subjects now working in Education who\n studied in each region five years after\n graduation, male and female level 7 (research) graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For level 7 (research) graduates of all subjects in the Education industry five years after graduation, the region where\n the most graduates had studied was East of England<\/b>. The region where the least graduates\n had studied was East Midlands<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was East Midlands<\/b> and the region with the\n least graduates lived was North East<\/b>.",
+ "maptext2": "For level 7 (research) graduates of all subjects in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was East Midlands<\/b>, where the number of graduates increased by 115.6%<\/b>. The region with the largest decrease is East of England<\/b> where the number of graduates decreased by -64.7%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_4.json b/tests/shinytest/testUI-current/regional_4.json
new file mode 100644
index 0000000..17598b5
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_4.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "Level 7 (research)",
+ "regions.subjectinput": "Medicine and dentistry",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of Medicine and dentistry now working in Education who\n studied in each region five years after\n graduation, male and female level 7 (research) graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For level 7 (research) graduates of Medicine and dentistry in the Education industry five years after graduation, the region where\n the most graduates had studied was North West<\/b>. The region where the least graduates\n had studied was North East<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was West Midlands<\/b> and the region with the\n least graduates lived was East Midlands<\/b>.",
+ "maptext2": "For level 7 (research) graduates of Medicine and dentistry in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was West Midlands<\/b>, where the number of graduates increased by 143.4%<\/b>. The region with the largest decrease is London<\/b> where the number of graduates decreased by -99.2%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_5.json b/tests/shinytest/testUI-current/regional_5.json
new file mode 100644
index 0000000..98bfd59
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_5.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "Level 7 (research)",
+ "regions.subjectinput": "Medicine and dentistry",
+ "sectionnameinput": "Education",
+ "YAGinput": "5"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of Medicine and dentistry now working in Education who\n are currently living in each region five years after\n graduation, male and female level 7 (research) graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For level 7 (research) graduates of Medicine and dentistry in the Education industry five years after graduation, the region where\n the most graduates had studied was North West<\/b>. The region where the least graduates\n had studied was North East<\/b>. The region where the highest number of graduates lived\n 5 years after graduation was West Midlands<\/b> and the region with the\n least graduates lived was East Midlands<\/b>.",
+ "maptext2": "For level 7 (research) graduates of Medicine and dentistry in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region five years after graduation was West Midlands<\/b>, where the number of graduates increased by 143.4%<\/b>. The region with the largest decrease is London<\/b> where the number of graduates decreased by -99.2%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/regional_6.json b/tests/shinytest/testUI-current/regional_6.json
new file mode 100644
index 0000000..a641a64
--- /dev/null
+++ b/tests/shinytest/testUI-current/regional_6.json
@@ -0,0 +1,14 @@
+{
+ "input": {
+ "navbar": "regional",
+ "qualinput2": "Level 7 (research)",
+ "regions.subjectinput": "All",
+ "sectionnameinput": "Education",
+ "YAGinput": "3"
+ },
+ "output": {
+ "map_title": " Map to show the number of graduates of all subjects now working in Education who\n are currently living in each region three years after\n graduation, male and female level 7 (research) graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>",
+ "maptext": "For level 7 (research) graduates of all subjects in the Education industry three years after graduation, the region where\n the most graduates had studied was East of England<\/b>. The region where the least graduates\n had studied was East Midlands<\/b>. The region where the highest number of graduates lived\n 3 years after graduation was South East<\/b> and the region with the\n least graduates lived was North East<\/b>.",
+ "maptext2": "For level 7 (research) graduates of all subjects in the Education industry, the region with the highest proportionate increase in graduates who studied compared to living in the region three years after graduation was East Midlands<\/b>, where the number of graduates increased by 209.8%<\/b>. The region with the largest decrease is North East<\/b> where the number of graduates decreased by -87.9%<\/b>."
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_0.json b/tests/shinytest/testUI-current/subjectByIndustry_0.json
new file mode 100644
index 0000000..7689354
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_0.json
@@ -0,0 +1,4216 @@
+{
+ "input": {
+ "countinput2": "sex",
+ "crosstabs.subjectinput": "All",
+ "earningsbutton": "Proportions",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "First degree",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Accommodation and food service activities",
+ "Manufacturing",
+ "Information and communication",
+ "Financial and insurance activities",
+ "Administrative and support service activities",
+ "Activities of extraterritorial organisations and bodies",
+ "Transportation and storage",
+ "Education",
+ "Agriculture, forestry and fishing",
+ "Public administration and defence - compulsory social security",
+ "Arts, entertainment and recreation",
+ "Mining and quarrying",
+ "Construction",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Other service activities",
+ "Electricity, gas, steam and air conditioning supply",
+ "Real estate activities",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Professional, scientific and technical activities",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "Female": [
+ 0.00085030727012716,
+ 0.0569705870985197,
+ 0.0407760986356433,
+ 0.0395779383913732,
+ 0.0110926448421134,
+ 0.0092760793104781,
+ 0.0747497391102694,
+ 0.122792099872454,
+ 0.0205619758048931,
+ 0.0672515750009663,
+ 0.0323503265952924,
+ 0.0122135044254628,
+ 0.11877246550458,
+ 0.021141730761798,
+ 0.0321184246125304,
+ 0.0429791674718819,
+ 0.0728558729177134,
+ 0.0638116955899973,
+ 0.0224944923279094,
+ 0.0410080006184053,
+ 0.0615313260928381,
+ 0.0348239477447532
+ ],
+ "Male": [
+ 0.00861804810785966,
+ 0.0920407537919412,
+ 0.0263137735559982,
+ 0.018538379040907,
+ 0.0619350390684848,
+ 0.0700168530718554,
+ 0.00356212655124866,
+ 0.0273096368929064,
+ 0.0928451049486747,
+ 0.057300444308258,
+ 0.0204535008426536,
+ 0.0718170675654972,
+ 0.0402175578366784,
+ 0.015167764669833,
+ 0.0332848169143558,
+ 0.0912747050712425,
+ 0.111268576681477,
+ 0.012371686839283,
+ 0.0491420254328175,
+ 0.016316837750881,
+ 0.0161253255707063,
+ 0.0640799754864409
+ ],
+ "Female & Male": [
+ 0.110233829334953,
+ 0.110119951412086,
+ 0.0945186759793501,
+ 0.0902292742180383,
+ 0.0684785909505011,
+ 0.0593303978135439,
+ 0.0579638627391436,
+ 0.05636957181901,
+ 0.0561797752808989,
+ 0.042931976920741,
+ 0.0395156392347404,
+ 0.0375417552383845,
+ 0.0346948071667173,
+ 0.0277482538718494,
+ 0.0260400850288491,
+ 0.0199286365016702,
+ 0.0169298511995141,
+ 0.0145763741269359,
+ 0.00588369268144549,
+ 0.00345429699362284,
+ 0.00174612815062253,
+ 0.0255845733373823
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Residential nursing care activities",
+ "Other social work activities without accommodation",
+ "Other human health activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Residential care activities for the elderly and disabled",
+ "Other residential care activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Hospital activities",
+ "Medical and dental practice activities"
+ ],
+ "Female": [
+ 0.00150112414500452,
+ 0.00609619420878531,
+ 0.00700637807951203,
+ 0.000889806619889555,
+ 0.00434714684526195,
+ 0.00532865109391875,
+ 0.00684336007281471,
+ 0.0009815042486568,
+ 0.00128037059426856
+ ],
+ "Male": [
+ 0.00317324409469405,
+ 0.00465365560334122,
+ 0.00497392122772847,
+ 0.00624844769212669,
+ 0.0108792271794403,
+ 0.00579746140472424,
+ 0.00445430659224304,
+ 0.00597066628321939,
+ 0.00491509692937163
+ ],
+ "Female & Male": [
+ 0.00789058212100474,
+ 0.00674544826231019,
+ 0.00538687229385897,
+ 0.00453310385483226,
+ 0.00451616400485157,
+ 0.00410621963531891,
+ 0.00401474444542319,
+ 0.00150764664828128,
+ 0.00134841205846281
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.6%",
+ "0.7%",
+ "0.1%",
+ "0.4%",
+ "0.5%",
+ "0.7%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.5%",
+ "0.5%",
+ "0.6%",
+ "1.1%",
+ "0.6%",
+ "0.4%",
+ "0.6%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.7%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.2%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Event catering and other food service activities",
+ "Holiday and other short-stay accommodation",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Beverage serving activities",
+ "Other accommodation",
+ "Hotels and similar accommodation",
+ "Restaurants and mobile food service activities"
+ ],
+ "Female": [
+ 0.0094414595545533,
+ 0.00750222451654972,
+ 0.000998485291021104,
+ 0.008008259579006,
+ 0.00465280560781943,
+ 0.000696222736936484,
+ 0.00101886254185827
+ ],
+ "Male": [
+ 0.000107844546987542,
+ 0.00626805579157897,
+ 0.00173531680152682,
+ 0.00461770742101204,
+ 0.000124184629864443,
+ 0.00147387547549641,
+ 0.00114053778480764
+ ],
+ "Female & Male": [
+ 0.00904926785968383,
+ 0.00660654149246854,
+ 0.00565113395355771,
+ 0.00536993244387828,
+ 0.00415365121526484,
+ 0.00404862414538457,
+ 0.00132469626848985
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "0.8%",
+ "0.1%",
+ "0.8%",
+ "0.5%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.0%",
+ "0.6%",
+ "0.2%",
+ "0.5%",
+ "0.0%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "0.7%",
+ "0.6%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of cutlery; tools and general hardware",
+ "Treatment and coating of metals; machining",
+ "Manufacture of dairy products",
+ "Manufacture of irradiation; electromedical and electrotherapeutic equipment",
+ "Manufacture of metal forming machinery and machine tools",
+ "Manufacture of tanks; reservoirs and containers of metal",
+ "Manufacture of prepared animal feeds",
+ "Manufacture of beverages",
+ "Manufacture of motor vehicles",
+ "Casting of metals",
+ "Manufacture of computers and peripheral equipment",
+ "Manufacture of sports goods",
+ "Manufacture of knitted and crocheted apparel",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of railway locomotives and rolling stock",
+ "Manufacture of abrasive products and non-metallic mineral products n.e.c.",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Manufacture of parts and accessories for motor vehicles",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Tanning and dressing of leather; manufacture of luggage; handbags; saddlery and harness; dressing and dyeing of fur",
+ "Manufacture of other special-purpose machinery",
+ "Manufacture of other chemical products",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Manufacture of weapons and ammunition",
+ "Cutting; shaping and finishing of stone",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of other textiles",
+ "Manufacture of other products of first processing of steel",
+ "Printing and service activities related to printing",
+ "Manufacture of wearing apparel; except fur apparel",
+ "Forging; pressing; stamping and roll-forming of metal; powder metallurgy",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of vegetable and animal oils and fats",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of articles of fur",
+ "Manufacture of pulp; paper and paperboard",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacture of agricultural and forestry machinery",
+ "Manufacture of glass and glass products",
+ "Manufacture of structural metal products",
+ "Weaving of textiles",
+ "Manufacture of rubber products",
+ "Reproduction of recorded media",
+ "Manufacture of tubes; pipes; hollow profiles and related fittings; of steel",
+ "Manufacture of clay building materials",
+ "Manufacture of other food products",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of other porcelain and ceramic products",
+ "Manufacture of military fighting vehicles",
+ "Manufacture of batteries and accumulators",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of electronic components and boards",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of pesticides and other agrochemical products",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of jewellery; bijouterie and related articles",
+ "Sawmilling and planing of wood",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Manufacture of consumer electronics",
+ "Manufacture of refined petroleum products",
+ "Manufacturing n.e.c.",
+ "Manufacture of games and toys",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Manufacture of communication equipment",
+ "Preparation and spinning of textile fibres",
+ "Manufacture of footwear",
+ "Manufacture of domestic appliances",
+ "Manufacture of refractory products",
+ "Manufacture of transport equipment n.e.c.",
+ "Manufacture of plastics products",
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of musical instruments",
+ "Manufacture of wiring and wiring devices",
+ "Finishing of textiles",
+ "Manufacture of other electrical equipment",
+ "Manufacture of bodies (coachwork) for motor vehicles; manufacture of trailers and semi-trailers",
+ "Installation of industrial machinery and equipment",
+ "Building of ships and boats",
+ "Manufacture of steam generators; except central heating hot water boilers",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of furniture",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Processing and preserving of fish; crustaceans and molluscs"
+ ],
+ "Female": [
+ 0.00303621037473764,
+ 0.00644600368148998,
+ 0.00544072597352316,
+ 0.000186791466007349,
+ 0.00481242740604389,
+ 0.00432337338595192,
+ 0.000628298567479266,
+ 0.00645958851538143,
+ 0.00149772793653166,
+ 0.00246904355976987,
+ 0.00631355155104841,
+ 0.00174225494657764,
+ 0.00470374873491234,
+ 0.00883693444638406,
+ 0.000410941225216169,
+ 0.00113433362993554,
+ 0.00316866250517922,
+ 9.50938372401051e-05,
+ 0.0085550491431366,
+ 0.00538978284643025,
+ 0.00572600748524347,
+ 0.0077739211943786,
+ 0.00344715159995381,
+ 0.00240451559878552,
+ 0.00816108896028474,
+ 0.00290715445276893,
+ 0.00193583882953071,
+ 0.00129395542816,
+ 0.000400752599797586,
+ 6.45279609843571e-05,
+ "NA",
+ 0.00293772032902468,
+ 0.00153848243820599,
+ 0.00404488429117733,
+ 0.000631694775952127,
+ 0.00329092601020221,
+ 0.00615053354435109,
+ 0.00177621703130625,
+ 0.000210564925317376,
+ 0.000495846437037691,
+ 0.000686034111517901,
+ 0.00674487002710174,
+ 0.0035694151049768,
+ 0.00579053544622783,
+ 0.00992711736617241,
+ 0.00177621703130625,
+ 0.00265243881730436,
+ 0.0026490426088315,
+ 0.00566147952425912,
+ 0.00297507862222615,
+ 0.00427582646733187,
+ 0.00183055636687202,
+ 0.00369507481847266,
+ 0.00777052498590573,
+ 0.0134625703864206,
+ 0.00206149854302657,
+ 0.00301243691542762,
+ 0.00211244167011948,
+ 0.00775694015201429,
+ 0.00624562738159119,
+ 0.00474789944505954,
+ 0.00548827289214321,
+ 0.00115471088077271,
+ 0.00137886063998152,
+ 0.000482261603146248,
+ 0.000281885303247455,
+ 0.000791316574176589,
+ 0.00690449182532621,
+ 0.00114112604688126,
+ 0.010572396976016,
+ 0.00538638663795738,
+ 0.00430639234358762,
+ 0.00935315813425891,
+ 0.00316866250517922,
+ 0.00056716681496777,
+ 0.000156225589751601,
+ 0.0040992236267431,
+ "NA",
+ 0.0118391827363931,
+ 0.00409582741827024,
+ 0.00622864633922689,
+ 0.000686034111517901,
+ 0.00060452510816924,
+ 0.00799467474511455,
+ 0.00191546157869355,
+ 0.00907806524795718,
+ 0.00697241599478342,
+ 0.00230262934459969,
+ 0.00186791466007349,
+ 0.00329092601020221
+ ],
+ "Male": [
+ 0.00671250604583066,
+ 0.00346082955332749,
+ 0.000277781408907306,
+ 0.00515366213937437,
+ 0.00600661446554857,
+ 0.00390527980757918,
+ 0.00337586112236761,
+ 0.00211113870769553,
+ 0.00307193558085727,
+ 0.000202617027673564,
+ 0.00106210538699852,
+ 0.0073791814272082,
+ 0.00165361638714232,
+ 0.00348697368593054,
+ 0.00525823866978653,
+ 0.00417325716676035,
+ 0.00489875684649473,
+ 0.00272552582386698,
+ 0.00123204224891829,
+ 0.00856873946064654,
+ 0.00682035059281821,
+ 0.00606870678048079,
+ 0.00342161335442293,
+ 0.000503274552608531,
+ 0.00648701290212944,
+ 0.00829422606831462,
+ 0.00795435234447509,
+ 0.00162420423796389,
+ 0.00383338344292082,
+ 0.000349677773565668,
+ 0.00254251689564569,
+ 0.00112746571850612,
+ 0.00671904207898142,
+ 0.00987267807422319,
+ 0.000562098850965372,
+ 0.00105556935384776,
+ 0.000954260840010981,
+ "NA",
+ 0.00913737434476268,
+ 0.00193793382920038,
+ 0.00591837801801331,
+ 0.000415038105073269,
+ 0.00124838233179519,
+ 0.00778768349913071,
+ 0.00539222734937712,
+ 0.00254251689564569,
+ 0.00243794036523353,
+ 0.000852952326174198,
+ 0.00356540608373966,
+ 0.00408502071922509,
+ 0.00214381887344933,
+ 0.0029510189675682,
+ 0.00533340305102027,
+ 0.000735303729460516,
+ 0.00320592426044785,
+ 0.00497718924430385,
+ 0.00246735251441195,
+ 0.00707852390227323,
+ 0.00297389508359586,
+ 0.00400985633799135,
+ 0.00171897671864992,
+ 0.0063464881893881,
+ 0.00595759421691787,
+ 0.000300657524934966,
+ 0.00611445901253611,
+ 0.00204251035961254,
+ 0.00442162642648924,
+ 0.000571902900691512,
+ 0.00511117792389443,
+ 0.0111047203231415,
+ 0.00197715002810494,
+ 0.0127583367102838,
+ 0.00497392122772847,
+ 0.00322226434332475,
+ 0.00381377534346854,
+ 0.00121897018261677,
+ 0.00236277598399979,
+ 0.00816023738872404,
+ 0.00114053778480764,
+ 0.00344448947045059,
+ 0.00635956025568962,
+ 0.00308173963058341,
+ 0.000705891580282095,
+ 0.00701969960391639,
+ 0.00488568478019321,
+ 0.00486280866416554,
+ 0.00481705643211022,
+ 0.000313729591236487,
+ 0.00457195518895672,
+ 0.00094445679028484
+ ],
+ "Female & Male": [
+ 0.0111565851972815,
+ 0.0100080633685908,
+ 0.0088392137199233,
+ 0.0083818377704447,
+ 0.00828697461055285,
+ 0.00775845129115537,
+ 0.00737222271159567,
+ 0.00728752346169222,
+ 0.00715878060183899,
+ 0.00711134902189306,
+ 0.00703681368197803,
+ 0.00688774300214797,
+ 0.00662348134244923,
+ 0.006396487352708,
+ 0.00629484825282387,
+ 0.00617626930295905,
+ 0.00606785426308265,
+ 0.00597299110319079,
+ 0.00594588734322169,
+ 0.00583408433334914,
+ 0.00563758207357316,
+ 0.00562064222359247,
+ 0.00561386628360019,
+ 0.00544107981379717,
+ 0.00542075199382034,
+ 0.00540381214383965,
+ 0.00540042417384352,
+ 0.00508534296420271,
+ 0.0050751790542143,
+ 0.00506501514422588,
+ 0.00489900461441513,
+ 0.00487190085444603,
+ 0.00482446927450011,
+ 0.00474993393458508,
+ 0.00460763919474729,
+ 0.00458731137477046,
+ 0.00453987979482454,
+ 0.00437725723500993,
+ 0.00430610986509104,
+ 0.00418075497523394,
+ 0.00399441662544637,
+ 0.00385889782560086,
+ 0.00376742263570514,
+ 0.00358108428591756,
+ 0.00357430834592529,
+ 0.00354381661596005,
+ 0.00350654894600253,
+ 0.00346928127604502,
+ 0.00329988277623813,
+ 0.00320163164635014,
+ 0.003198243676354,
+ 0.00317452788638104,
+ 0.0031711399163849,
+ 0.00298141359660119,
+ 0.00291704216667457,
+ 0.00286622261673251,
+ 0.00281879103678658,
+ 0.00261212486702218,
+ 0.00259518501704149,
+ 0.00251726170713032,
+ 0.00247660606717667,
+ 0.00242917448723074,
+ 0.0024257865172346,
+ 0.00237835493728868,
+ 0.00233431132733889,
+ 0.00229365568738523,
+ 0.0022191203474702,
+ 0.00207682560763242,
+ 0.00195485868777146,
+ 0.00178207221796844,
+ 0.00175835642799547,
+ 0.00174480454801092,
+ 0.00166688123809976,
+ 0.00155507822822721,
+ 0.00146360303833149,
+ 0.00139584363840874,
+ 0.0013653519084435,
+ 0.00135180002845895,
+ 0.00114852182869069,
+ 0.00107398648877566,
+ 0.000792784979096225,
+ 0.000745353399150297,
+ 0.000525135349401346,
+ 0.00051835940940907,
+ 0.000440436099497903,
+ 0.000389616549555837,
+ 0.000294753389663981,
+ 0.000254097749710329,
+ 0.000145682709833922,
+ 0.00011857894986482
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.6%",
+ "0.5%",
+ "0.0%",
+ "0.5%",
+ "0.4%",
+ "0.1%",
+ "0.6%",
+ "0.1%",
+ "0.2%",
+ "0.6%",
+ "0.2%",
+ "0.5%",
+ "0.9%",
+ "0.0%",
+ "0.1%",
+ "0.3%",
+ "0.0%",
+ "0.9%",
+ "0.5%",
+ "0.6%",
+ "0.8%",
+ "0.3%",
+ "0.2%",
+ "0.8%",
+ "0.3%",
+ "0.2%",
+ "0.1%",
+ "0.0%",
+ "0.0%",
+ "x",
+ "0.3%",
+ "0.2%",
+ "0.4%",
+ "0.1%",
+ "0.3%",
+ "0.6%",
+ "0.2%",
+ "0.0%",
+ "0.0%",
+ "0.1%",
+ "0.7%",
+ "0.4%",
+ "0.6%",
+ "1.0%",
+ "0.2%",
+ "0.3%",
+ "0.3%",
+ "0.6%",
+ "0.3%",
+ "0.4%",
+ "0.2%",
+ "0.4%",
+ "0.8%",
+ "1.3%",
+ "0.2%",
+ "0.3%",
+ "0.2%",
+ "0.8%",
+ "0.6%",
+ "0.5%",
+ "0.5%",
+ "0.1%",
+ "0.1%",
+ "0.0%",
+ "0.0%",
+ "0.1%",
+ "0.7%",
+ "0.1%",
+ "1.1%",
+ "0.5%",
+ "0.4%",
+ "0.9%",
+ "0.3%",
+ "0.1%",
+ "0.0%",
+ "0.4%",
+ "x",
+ "1.2%",
+ "0.4%",
+ "0.6%",
+ "0.1%",
+ "0.1%",
+ "0.8%",
+ "0.2%",
+ "0.9%",
+ "0.7%",
+ "0.2%",
+ "0.2%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.3%",
+ "0.0%",
+ "0.5%",
+ "0.6%",
+ "0.4%",
+ "0.3%",
+ "0.2%",
+ "0.3%",
+ "0.0%",
+ "0.1%",
+ "0.7%",
+ "0.2%",
+ "0.3%",
+ "0.5%",
+ "0.4%",
+ "0.5%",
+ "0.3%",
+ "0.1%",
+ "0.9%",
+ "0.7%",
+ "0.6%",
+ "0.3%",
+ "0.1%",
+ "0.6%",
+ "0.8%",
+ "0.8%",
+ "0.2%",
+ "0.4%",
+ "0.0%",
+ "0.3%",
+ "0.1%",
+ "0.7%",
+ "1.0%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "x",
+ "0.9%",
+ "0.2%",
+ "0.6%",
+ "0.0%",
+ "0.1%",
+ "0.8%",
+ "0.5%",
+ "0.3%",
+ "0.2%",
+ "0.1%",
+ "0.4%",
+ "0.4%",
+ "0.2%",
+ "0.3%",
+ "0.5%",
+ "0.1%",
+ "0.3%",
+ "0.5%",
+ "0.2%",
+ "0.7%",
+ "0.3%",
+ "0.4%",
+ "0.2%",
+ "0.6%",
+ "0.6%",
+ "0.0%",
+ "0.6%",
+ "0.2%",
+ "0.4%",
+ "0.1%",
+ "0.5%",
+ "1.1%",
+ "0.2%",
+ "1.3%",
+ "0.5%",
+ "0.3%",
+ "0.4%",
+ "0.1%",
+ "0.2%",
+ "0.8%",
+ "0.1%",
+ "0.3%",
+ "0.6%",
+ "0.3%",
+ "0.1%",
+ "0.7%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.0%",
+ "0.5%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "1.0%",
+ "0.9%",
+ "0.8%",
+ "0.8%",
+ "0.8%",
+ "0.7%",
+ "0.7%",
+ "0.7%",
+ "0.7%",
+ "0.7%",
+ "0.7%",
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.0%",
+ "0.0%",
+ "0.0%",
+ "0.0%",
+ "0.0%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Motion picture; video and television programme activities",
+ "Other telecommunications activities",
+ "Other information service activities",
+ "Television programming and broadcasting activities",
+ "Wired telecommunications activities",
+ "Data processing; hosting and related activities; web portals",
+ "Wireless telecommunications activities",
+ "Software publishing",
+ "Satellite telecommunications activities",
+ "Radio broadcasting",
+ "Publishing of books; periodicals and other publishing activities",
+ "Sound recording and music publishing activities",
+ "Computer programming; consultancy and related activities"
+ ],
+ "Female": [
+ 0.00860938847870238,
+ 0.00525733071598867,
+ 0.00548148047519749,
+ 0.00190866916174782,
+ 0.00164716110933754,
+ 0.00361016960665113,
+ 0.000499242645510552,
+ 0.00120565400786562,
+ 0.00252338289533565,
+ 0.00380375348960421,
+ 0.006592040645823,
+ 0.00201395162440651,
+ 0.00373243311167413
+ ],
+ "Male": [
+ 0.00738898547693434,
+ 0.0030163792990758,
+ 0.0009346527405587,
+ 0.00092484869083256,
+ 0.00653603315076014,
+ 0.000245101243153505,
+ 0.00048366645315625,
+ 0.00210133465796939,
+ 0.00192486176289886,
+ 0.00635629223911424,
+ 0.00529091883554033,
+ 0.0036405704649734,
+ 0.0029346788846913
+ ],
+ "Female & Male": [
+ 0.00504807529424519,
+ 0.00491594446439582,
+ 0.00458392340477433,
+ 0.0028120150967943,
+ 0.00274425569687155,
+ 0.00255452937708784,
+ 0.00247999403717281,
+ 0.00241223463725005,
+ 0.00204633387766718,
+ 0.00106721054878338,
+ 0.00106382257878724,
+ 0.00105027069880269,
+ 0.000149070679830059
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "0.5%",
+ "0.5%",
+ "0.2%",
+ "0.2%",
+ "0.4%",
+ "0.0%",
+ "0.1%",
+ "0.3%",
+ "0.4%",
+ "0.7%",
+ "0.2%",
+ "0.4%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.3%",
+ "0.1%",
+ "0.1%",
+ "0.7%",
+ "0.0%",
+ "0.0%",
+ "0.2%",
+ "0.2%",
+ "0.6%",
+ "0.5%",
+ "0.4%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.5%",
+ "0.5%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Trusts; funds and similar financial entities",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Activities of holding companies",
+ "Monetary intermediation",
+ "Insurance",
+ "Pension funding",
+ "Fund management activities",
+ "Reinsurance",
+ "Other financial service activities; except insurance and pension funding",
+ "Activities auxiliary to insurance and pension funding"
+ ],
+ "Female": [
+ 0.00379016865571276,
+ 0.00227885588528966,
+ 0.00162678385850037,
+ 0.00332828430340368,
+ 0.00406526154201449,
+ 0.00167093456864756,
+ 0.000118867296550131,
+ 0.0056105363971662,
+ 0.000550185772603465,
+ 0.00628638188326552
+ ],
+ "Male": [
+ 0.00442162642648924,
+ 0.00106210538699852,
+ 0.00748375795762036,
+ 0.00698701943816259,
+ 0.00213074680714781,
+ 0.00503601354266069,
+ 0.00591511000143793,
+ 0.00120916613289063,
+ 0.00118955803343835,
+ 0.00321246029359861
+ ],
+ "Female & Male": [
+ 0.0111328694073085,
+ 0.00653200615255351,
+ 0.00490916852440355,
+ 0.00405201211538071,
+ 0.00386228579559699,
+ 0.00285605870674409,
+ 0.00260196095703376,
+ 0.00119595340863661,
+ 0.000819888739065327,
+ 0.000447212039490178
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.2%",
+ "0.2%",
+ "0.3%",
+ "0.4%",
+ "0.2%",
+ "0.0%",
+ "0.6%",
+ "0.1%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.1%",
+ "0.7%",
+ "0.7%",
+ "0.2%",
+ "0.5%",
+ "0.6%",
+ "0.1%",
+ "0.1%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "0.7%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.3%",
+ "0.1%",
+ "0.1%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Renting and leasing of motor vehicles",
+ "Other reservation service and related activities",
+ "Other human resources provision",
+ "Private security activities",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Business support service activities n.e.c.",
+ "Leasing of intellectual property and similar products; except copyrighted works",
+ "Renting and leasing of personal and household goods",
+ "Combined facilities support activities",
+ "Landscape service activities",
+ "Investigation activities",
+ "Travel agency and tour operator activities",
+ "Activities of employment placement agencies",
+ "Office administrative and support activities",
+ "Security systems service activities",
+ "Organisation of conventions and trade shows",
+ "Temporary employment agency activities",
+ "Activities of call centres",
+ "Cleaning activities"
+ ],
+ "Female": [
+ 0.00715241504384505,
+ 0.00195621608036788,
+ 0.00859919985328379,
+ 0.000740373447083676,
+ 0.00726788613192232,
+ 0.00633392880188558,
+ 0.00474110702811381,
+ 0.00148753931111307,
+ 0.00147395447722163,
+ 0.00395997907935581,
+ 0.00686373732365188,
+ 0.00493469091106688,
+ 0.00696901978631056,
+ 0.00626940084090122,
+ 0.00326036013394646,
+ 0.00434714684526195,
+ 3.3962084728609e-06,
+ 0.00481582361451675,
+ 0.00374262173709271
+ ],
+ "Male": [
+ 0.00290853475208826,
+ 0.00288239061948522,
+ 0.00696414332213493,
+ 0.000202617027673564,
+ 0.00440201832703695,
+ 0.00808834102406567,
+ 0.00384318749264696,
+ 0.00168629655289612,
+ 0.00640531248774494,
+ 0.00126472241467209,
+ 0.00403600047059439,
+ 0.00164381233741618,
+ 0.000957528856586361,
+ 0.00547065974718624,
+ 0.00523209453718349,
+ 0.00265362945920862,
+ 0.00483012849841174,
+ 0.00517653825540203,
+ 0.00607197479705617
+ ],
+ "Female & Male": [
+ 0.00786686633103177,
+ 0.00785331445104722,
+ 0.00781265881109357,
+ 0.00691484676211707,
+ 0.00671834450234109,
+ 0.00607124223307878,
+ 0.00560370237361178,
+ 0.00516326627411388,
+ 0.00509889484418726,
+ 0.00424851437515669,
+ 0.00420785873520304,
+ 0.00408250384534595,
+ 0.00362512789586735,
+ 0.00292043013667071,
+ 0.00202261808769422,
+ 0.00148393085830832,
+ 0.000921527838949458,
+ 0.000880872198995806,
+ 0.000816500769069189
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.2%",
+ "0.9%",
+ "0.1%",
+ "0.7%",
+ "0.6%",
+ "0.5%",
+ "0.1%",
+ "0.1%",
+ "0.4%",
+ "0.7%",
+ "0.5%",
+ "0.7%",
+ "0.6%",
+ "0.3%",
+ "0.4%",
+ "0.0%",
+ "0.5%",
+ "0.4%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.3%",
+ "0.7%",
+ "0.0%",
+ "0.4%",
+ "0.8%",
+ "0.4%",
+ "0.2%",
+ "0.6%",
+ "0.1%",
+ "0.4%",
+ "0.2%",
+ "0.1%",
+ "0.5%",
+ "0.5%",
+ "0.3%",
+ "0.5%",
+ "0.5%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.8%",
+ "0.8%",
+ "0.7%",
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.2%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "group_name": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "Female": [
+ 0.00641543780523424
+ ],
+ "Male": [
+ 0.0018039451496098
+ ],
+ "Female & Male": [
+ 0.00173802860801865
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Other passenger land transport",
+ "Warehousing and storage",
+ "Sea and coastal freight water transport",
+ "Sea and coastal passenger water transport",
+ "Other postal and courier activities",
+ "Freight rail transport",
+ "Postal activities under universal service obligation",
+ "Freight air transport and space transport",
+ "Passenger rail transport; interurban",
+ "Support activities for transportation",
+ "Inland passenger water transport",
+ "Passenger air transport",
+ "Freight transport by road and removal services",
+ "Inland freight water transport",
+ "Transport via pipeline"
+ ],
+ "Female": [
+ 0.00133470992983433,
+ 0.00436412788762625,
+ 0.00374941415403843,
+ 0.00669392690000883,
+ 0.00200715920746079,
+ 0.000964523206292495,
+ 0.00185093361770919,
+ 0.00365771652527119,
+ 0.000434714684526195,
+ 0.00203432887524368,
+ 0.00106640946047832,
+ 0.00591279895125082,
+ 0.00655468235262153,
+ "NA",
+ 0.00942787472066185
+ ],
+ "Male": [
+ 0.00210460267454477,
+ 0.00225819945358763,
+ 0.00186276944796664,
+ 0.000970600922887881,
+ 0.0045262029569014,
+ 0.000382357939319468,
+ 0.00111766166877998,
+ 0.00864390384188029,
+ 0.00170263663577302,
+ 0.00255885697852259,
+ 0.00410136080210199,
+ 0.0017222447352253,
+ 0.00323533640962627,
+ 0.00406541261977281,
+ 0.00142158721029033
+ ],
+ "Female & Male": [
+ 0.00753823324140641,
+ 0.0066471971324222,
+ 0.00537670838387055,
+ 0.00461102716474343,
+ 0.00422141061518759,
+ 0.003764034665709,
+ 0.00356414443593688,
+ 0.00310338051646215,
+ 0.00232075944735433,
+ 0.00220556846748565,
+ 0.00217507673752041,
+ 0.00161606168815769,
+ 0.00150425867828515,
+ 0.00112141806872158,
+ 0.000738577459158022
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "0.4%",
+ "0.4%",
+ "0.7%",
+ "0.2%",
+ "0.1%",
+ "0.2%",
+ "0.4%",
+ "0.0%",
+ "0.2%",
+ "0.1%",
+ "0.6%",
+ "0.7%",
+ "x",
+ "0.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.5%",
+ "0.0%",
+ "0.1%",
+ "0.9%",
+ "0.2%",
+ "0.3%",
+ "0.4%",
+ "0.2%",
+ "0.3%",
+ "0.4%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.7%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Other education",
+ "Secondary education",
+ "Primary education",
+ "Educational support activities",
+ "Pre-primary education",
+ "Higher education"
+ ],
+ "Female": [
+ 0.00421129850634751,
+ 0.0011377298384084,
+ 0.00434714684526195,
+ 0.00557997052091046,
+ 0.00411960087758027,
+ 0.00547129184977891
+ ],
+ "Male": [
+ 8.82364475352619e-05,
+ 0.00370919881305638,
+ 0.00379089922744088,
+ 0.00205231440933868,
+ 0.00788899201296749,
+ 0.000388893972470228
+ ],
+ "Female & Male": [
+ 0.00824293100060306,
+ 0.00546818357376627,
+ 0.00488545273443058,
+ 0.00405878805537298,
+ 0.000697921819204369,
+ 0.000447212039490178
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.1%",
+ "0.4%",
+ "0.6%",
+ "0.4%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.0%",
+ "0.4%",
+ "0.4%",
+ "0.2%",
+ "0.8%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.1%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of wearing apparel; except fur apparel",
+ "Sawmilling and planing of wood",
+ "Manufacture of musical instruments",
+ "Manufacture of jewellery; bijouterie and related articles",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Not known",
+ "Manufacture of articles of fur",
+ "Manufacture of knitted and crocheted apparel"
+ ],
+ "Female": [
+ 0.00273394782065302,
+ 0.00254036393769995,
+ 0.00137546443150866,
+ 0.00467997527560232,
+ 0.00706750983202353,
+ 0.00194602745494929,
+ 0.00714562262689933,
+ 0.00517242550416715
+ ],
+ "Male": [
+ 0.00731055307912522,
+ 0.00144446332631799,
+ 0.00578112132184734,
+ 0.00533013503444489,
+ 0.00847396697996052,
+ 0.00288239061948522,
+ 0.00778441548255533,
+ 0.00618308736061909
+ ],
+ "Female & Male": [
+ 0.00866981522011641,
+ 0.00837844980044857,
+ 0.00445856851491723,
+ 0.00381485421565107,
+ 0.00261212486702218,
+ 0.00256469328707625,
+ 0.000880872198995806,
+ 0.000701309789200507
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.3%",
+ "0.1%",
+ "0.5%",
+ "0.7%",
+ "0.2%",
+ "0.7%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.1%",
+ "0.6%",
+ "0.5%",
+ "0.8%",
+ "0.3%",
+ "0.8%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "0.8%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.3%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole",
+ "Compulsory social security activities"
+ ],
+ "Female": [
+ 0.00462223973156368,
+ 0.00700977428798489,
+ 0.00273734402912588
+ ],
+ "Male": [
+ 0.000817004143845018,
+ 0.00363730244839802,
+ 0.00249022863043961
+ ],
+ "Female & Male": [
+ 0.00690468285212866,
+ 0.00303223314654325,
+ 0.00271715193690245
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.7%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "0.4%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.3%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Creative; arts and entertainment activities",
+ "Gambling and betting activities",
+ "Amusement and recreation activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Sports activities"
+ ],
+ "Female": [
+ 0.00395658287088295,
+ 0.000509431270929135,
+ 0.000828674867378059,
+ 0.00542714113963171,
+ 0.00204791370913512
+ ],
+ "Male": [
+ 0.00169936861919764,
+ 0.00691839109007961,
+ 0.00441509039333847,
+ 0.00346409756990287,
+ 0.00715368828350697
+ ],
+ "Female & Male": [
+ 0.00664042119242992,
+ 0.00384195797562017,
+ 0.00330665871623041,
+ 0.00317452788638104,
+ 0.00114174588869841
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.1%",
+ "0.1%",
+ "0.5%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.7%",
+ "0.4%",
+ "0.3%",
+ "0.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.4%",
+ "0.3%",
+ "0.3%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Not known",
+ "Combined facilities support activities",
+ "Computer programming; consultancy and related activities",
+ "Activities of extraterritorial organisations and bodies",
+ "Libraries; archives; museums and other cultural activities",
+ "Cleaning activities"
+ ],
+ "Female": [
+ 0.00554261222770899,
+ 0.00381394211502279,
+ "NA",
+ "NA",
+ 0.00410601604368883,
+ 0.000774335531812285
+ ],
+ "Male": [
+ 0.00584974966993033,
+ 0.00653930116733552,
+ 0.0045425430397783,
+ 0.00407194865292357,
+ 0.00446737865854456,
+ 0.00641838455404646
+ ],
+ "Female & Male": [
+ 0.00675900014229474,
+ 0.00612206178302085,
+ 0.00552239109370447,
+ 0.00376742263570514,
+ 0.00256808125707239,
+ 0.000389616549555837
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.4%",
+ "x",
+ "x",
+ "0.4%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.7%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.4%",
+ "0.3%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Demolition and site preparation",
+ "Building completion and finishing",
+ "Electrical; plumbing and other construction installation activities",
+ "Construction of other civil engineering projects",
+ "Construction of utility projects",
+ "Construction of residential and non-residential buildings",
+ "Development of building projects",
+ "Other specialised construction activities",
+ "Construction of roads and railways"
+ ],
+ "Female": [
+ 0.00121923884175706,
+ 0.0125829523919496,
+ 0.00303281416626478,
+ 0.000811693825013755,
+ 0.0084599553058965,
+ 0.00160980281613607,
+ 0.002197346881941,
+ 0.0032399828831093,
+ 0.0048294084484082
+ ],
+ "Male": [
+ 0.00194773787892652,
+ 0.00613406711198839,
+ 0.00314383194551563,
+ 0.00259480516085178,
+ 0.002820298304553,
+ 0.000617655132746833,
+ 0.00911449822873502,
+ 0.00223205532098459,
+ 0.00169610060262226
+ ],
+ "Female & Male": [
+ 0.0098454408087762,
+ 0.00645069487264621,
+ 0.00569178959351136,
+ 0.00240884666725391,
+ 0.00199551432772511,
+ 0.00145682709833922,
+ 0.0012128932586173,
+ 0.00117223761866365,
+ 0.000572566929347274
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "1.3%",
+ "0.3%",
+ "0.1%",
+ "0.8%",
+ "0.2%",
+ "0.2%",
+ "0.3%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.6%",
+ "0.3%",
+ "0.3%",
+ "0.3%",
+ "0.1%",
+ "0.9%",
+ "0.2%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "1.0%",
+ "0.6%",
+ "0.6%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Water collection; treatment and supply",
+ "Materials recovery",
+ "Sewerage",
+ "Remediation activities and other waste management services",
+ "Waste treatment and disposal",
+ "Waste collection"
+ ],
+ "Female": [
+ 0.00760071456226269,
+ 0.000652072026789292,
+ 0.00503657716525271,
+ 0.00426224163344043,
+ 0.000937353538509608,
+ 0.00115131467229984
+ ],
+ "Male": [
+ 0.00623864364240055,
+ 0.00504254957581145,
+ 0.00379089922744088,
+ 0.00091504464110642,
+ 0.000581706950417653,
+ 0.00128433051412437
+ ],
+ "Female & Male": [
+ 0.00607463020307492,
+ 0.00512599860415636,
+ 0.00442807678495199,
+ 0.0039707008354734,
+ 0.00331343465622268,
+ 0.00220556846748565
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.1%",
+ "0.5%",
+ "0.4%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.5%",
+ "0.4%",
+ "0.1%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Repair of personal and household goods",
+ "Repair of computers and communication equipment",
+ "Activities of business; employers and professional membership organisations",
+ "Activities of other membership organisations",
+ "Activities of trade unions",
+ "Other personal service activities"
+ ],
+ "Female": [
+ 0.00319583217296211,
+ 0.00499582266357838,
+ 0.000699618945409345,
+ 0.00521657621431434,
+ 0.00568525298356914,
+ 0.0090067448700271
+ ],
+ "Male": [
+ 0.00761447862063556,
+ 1.30720663015203e-05,
+ 0.00175165688440372,
+ 0.00537588726650022,
+ 0.00192812977947424,
+ 0.00122877423234291
+ ],
+ "Female & Male": [
+ 0.00582053245336459,
+ 0.00478720160454259,
+ 0.00452971588483612,
+ 0.00271376396690631,
+ 0.00119934137863275,
+ 0.000254097749710329
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.5%",
+ "0.1%",
+ "0.5%",
+ "0.6%",
+ "0.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.0%",
+ "0.2%",
+ "0.5%",
+ "0.2%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.5%",
+ "0.5%",
+ "0.3%",
+ "0.1%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Manufacture of gas; distribution of gaseous fuels through mains"
+ ],
+ "Female": [
+ 0.00542714113963171,
+ 0.00556638568701901
+ ],
+ "Male": [
+ 0.00638243637171728,
+ 0.00228434358619067
+ ],
+ "Female & Male": [
+ 0.00467201062467391,
+ 0.000958795508906973
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Buying and selling of own real estate",
+ "Real estate activities on a fee or contract basis",
+ "Renting and operating of own or leased real estate"
+ ],
+ "Female": [
+ 0.0051418596279114,
+ 0.00775694015201429,
+ 0.00242489284962268
+ ],
+ "Male": [
+ 0.00322880037647551,
+ 0.00857854351037268,
+ 0.00456215113923058
+ ],
+ "Female & Male": [
+ 0.00535299259389759,
+ 0.00259179704704535,
+ 0.00143988724835853
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.8%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.9%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.5%",
+ "0.3%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Undifferentiated goods-producing activities of private households for own use",
+ "Activities of households as employers of domestic personnel"
+ ],
+ "Female": [
+ 0.00366111273374405,
+ 0.00795052403496736
+ ],
+ "Male": [
+ "NA",
+ 0.00492490097909777
+ ],
+ "Female & Male": [
+ 0.00301190532656643,
+ 0.0029373699866514
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Architectural and engineering activities and related technical consultancy",
+ "Research and experimental development on social sciences and humanities",
+ "Translation and interpretation activities",
+ "Specialised design activities",
+ "Advertising",
+ "Veterinary activities",
+ "Technical testing and analysis",
+ "Management consultancy activities",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Photographic activities",
+ "Research and experimental development on natural sciences and engineering",
+ "Activities of head offices",
+ "Legal activities",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Market research and public opinion polling"
+ ],
+ "Female": [
+ 0.0043165809690062,
+ 0.00361016960665113,
+ 0.00421809092329324,
+ 0.0022754596768168,
+ 0.00117169192313701,
+ 0.00733581030137954,
+ 0.00319583217296211,
+ 0.00206149854302657,
+ 0.00447959897570352,
+ 0.004907521243284,
+ 0.00465620181629229,
+ 0.000777731740285146,
+ 0.00139923789081869,
+ 0.00219055446499528,
+ 0.00122942746717565
+ ],
+ "Male": [
+ 0.00382357939319468,
+ 0.00436933816128315,
+ 0.00674845422815985,
+ 0.00374841501196094,
+ 0.00701969960391639,
+ 0.00780402358200761,
+ 0.00638570438829266,
+ 0.00717002836638387,
+ 0.0136276291193349,
+ 0.000614387116171453,
+ 0.00159479208878547,
+ 0.00411116485182813,
+ 0.00289873070236212,
+ 0.00691839109007961,
+ 0.0028856586360606
+ ],
+ "Female & Male": [
+ 0.0090729836496568,
+ 0.00862915958016276,
+ 0.00753484527141028,
+ 0.00717910842181582,
+ 0.00667091292239516,
+ 0.00627113246285091,
+ 0.00555627079366585,
+ 0.00492610837438424,
+ 0.00437725723500993,
+ 0.00235802711731185,
+ 0.00209715342760924,
+ 0.00131453235850143,
+ 0.00128065265854006,
+ 0.000769069189123261,
+ 0.000514971439412933
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.4%",
+ "0.4%",
+ "0.2%",
+ "0.1%",
+ "0.7%",
+ "0.3%",
+ "0.2%",
+ "0.4%",
+ "0.5%",
+ "0.5%",
+ "0.1%",
+ "0.1%",
+ "0.2%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.4%",
+ "0.7%",
+ "0.4%",
+ "0.7%",
+ "0.8%",
+ "0.6%",
+ "0.7%",
+ "1.4%",
+ "0.1%",
+ "0.2%",
+ "0.4%",
+ "0.3%",
+ "0.7%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "0.9%",
+ "0.8%",
+ "0.7%",
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.5%",
+ "0.4%",
+ "0.2%",
+ "0.2%",
+ "0.1%",
+ "0.1%",
+ "0.1%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Non-specialised wholesale trade",
+ "Sale of motor vehicles",
+ "Wholesale on a fee or contract basis",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Wholesale of agricultural raw materials and live animals",
+ "Wholesale of other machinery; equipment and supplies",
+ "Wholesale of information and communication equipment",
+ "Retail trade not in stores; stalls or markets",
+ "Retail sale via stalls and markets",
+ "Retail sale of other household equipment in specialised stores",
+ "Wholesale of food; beverages and tobacco",
+ "Retail sale in non-specialised stores",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Maintenance and repair of motor vehicles",
+ "Retail sale of automotive fuel in specialised stores",
+ "Sale of motor vehicle parts and accessories",
+ "Retail sale of other goods in specialised stores",
+ "Sale; maintenance and repair of motorcycles and related parts and accessories",
+ "Other specialised wholesale",
+ "Wholesale of household goods"
+ ],
+ "Female": [
+ 0.00237055351405691,
+ 0.00801844820442458,
+ 0.0031788511305978,
+ 0.00487016295008253,
+ 0.000329432221867507,
+ 0.00953994960026626,
+ 0.00573619611066206,
+ 0.00387507386753428,
+ 0.00175583978046908,
+ 0.00318564354754352,
+ 0.000356601889650394,
+ 0.00333168051187654,
+ 0.00716939608620936,
+ 0.00756335626906122,
+ 0.00447959897570352,
+ 0.00859240743633807,
+ 0.00536940559559308,
+ 0.00845655909742364,
+ 0.00309054971030342,
+ 0.00580751648859214,
+ 0.00526751934140725
+ ],
+ "Male": [
+ 0.00441835840991386,
+ 0.00417979319991111,
+ 0.00333664492346305,
+ 0.00496738519457771,
+ 0.00697067935528569,
+ 0.00232029176851985,
+ 0.00379416724401626,
+ 0.000826808193571158,
+ 0.00140524712741343,
+ 0.00648374488555406,
+ 0.00550333991294004,
+ 0.00212747879057243,
+ 0.000362749839867188,
+ 0.0048693446973163,
+ 0.006689629929803,
+ 0.00351311781853358,
+ 0.00492490097909777,
+ 0.0056732767748598,
+ 0.00691185505692885,
+ 0.00116668191741069,
+ 0.00456868717238134
+ ],
+ "Female & Male": [
+ 0.00813112799073051,
+ 0.00784315054105881,
+ 0.00776861520114378,
+ 0.00708424526192396,
+ 0.00626435652285863,
+ 0.00588829185328735,
+ 0.00582053245336459,
+ 0.00529539710396325,
+ 0.00522763770404049,
+ 0.00405878805537298,
+ 0.00303562111653939,
+ 0.0024969338871535,
+ 0.00238513087728095,
+ 0.00221573237747407,
+ 0.00220218049748951,
+ 0.00175835642799547,
+ 0.00161606168815769,
+ 0.00039978045954425,
+ 0.000125354889857095,
+ 2.71037599691017e-05,
+ 6.77593999227543e-06
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.8%",
+ "0.3%",
+ "0.5%",
+ "0.0%",
+ "1.0%",
+ "0.6%",
+ "0.4%",
+ "0.2%",
+ "0.3%",
+ "0.0%",
+ "0.3%",
+ "0.7%",
+ "0.8%",
+ "0.4%",
+ "0.9%",
+ "0.5%",
+ "0.8%",
+ "0.3%",
+ "0.6%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.5%",
+ "0.7%",
+ "0.2%",
+ "0.4%",
+ "0.1%",
+ "0.1%",
+ "0.6%",
+ "0.6%",
+ "0.2%",
+ "0.0%",
+ "0.5%",
+ "0.7%",
+ "0.4%",
+ "0.5%",
+ "0.6%",
+ "0.7%",
+ "0.1%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.8%",
+ "0.8%",
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.6%",
+ "0.5%",
+ "0.5%",
+ "0.4%",
+ "0.3%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.2%",
+ "0.0%",
+ "0.0%",
+ "0.0%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "Female": [
+ 2.71696677828872e-05
+ ],
+ "Male": [
+ 0.00105883737042314
+ ],
+ "Female & Male": [
+ 0.00760938061132531
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "0.1%",
+ "5.7%",
+ "4.1%",
+ "4.0%",
+ "1.1%",
+ "0.9%",
+ "7.5%",
+ "12.3%",
+ "2.1%",
+ "6.7%",
+ "3.2%",
+ "1.2%",
+ "11.9%",
+ "2.1%",
+ "3.2%",
+ "4.3%",
+ "7.3%",
+ "6.4%",
+ "2.2%",
+ "4.1%",
+ "6.2%",
+ "3.5%"
+ ],
+ "footer": "25,875",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "0.9%",
+ "9.2%",
+ "2.6%",
+ "1.9%",
+ "6.2%",
+ "7.0%",
+ "0.4%",
+ "2.7%",
+ "9.3%",
+ "5.7%",
+ "2.0%",
+ "7.2%",
+ "4.0%",
+ "1.5%",
+ "3.3%",
+ "9.1%",
+ "11.1%",
+ "1.2%",
+ "4.9%",
+ "1.6%",
+ "1.6%",
+ "6.4%"
+ ],
+ "footer": "26,110",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "11.0%",
+ "11.0%",
+ "9.5%",
+ "9.0%",
+ "6.8%",
+ "5.9%",
+ "5.8%",
+ "5.6%",
+ "5.6%",
+ "4.3%",
+ "4.0%",
+ "3.8%",
+ "3.5%",
+ "2.8%",
+ "2.6%",
+ "2.0%",
+ "1.7%",
+ "1.5%",
+ "0.6%",
+ "0.3%",
+ "0.2%",
+ "2.6%"
+ ],
+ "footer": "26,345",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 0.122792099872454\n var min = 0.00085030727012716\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of all subjects, 5 years after graduation, the industry with the highest proportion of female graduates is Transportation and storage<\/b>, and the\n median earnings of females in this industry were £24,800<\/b>. The industry\n with the highest proportion of male graduates was Electricity, gas, steam and air conditioning supply<\/b> and the median earnings of males\n in this industry were £25,700<\/b>.
The biggest difference in proportions is seen in Transportation and storage<\/b> where the proportion of female graduates is 9.5 percentage points higher<\/b> than the proportion of male graduates. The biggest difference in median earnings is seen in Financial and insurance activities<\/b> where the median earnings of female graduates were £4,300 higher<\/b> than the median earnings of male graduates.The group with the highest earnings was female graduates in the Financial and insurance activities <\/b> industry (median earnings of £27,900<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of all subjects by sex, five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_1.json b/tests/shinytest/testUI-current/subjectByIndustry_1.json
new file mode 100644
index 0000000..dc2d5e8
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_1.json
@@ -0,0 +1,4216 @@
+{
+ "input": {
+ "countinput2": "sex",
+ "crosstabs.subjectinput": "All",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "First degree",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Accommodation and food service activities",
+ "Manufacturing",
+ "Information and communication",
+ "Financial and insurance activities",
+ "Administrative and support service activities",
+ "Activities of extraterritorial organisations and bodies",
+ "Transportation and storage",
+ "Education",
+ "Agriculture, forestry and fishing",
+ "Public administration and defence - compulsory social security",
+ "Arts, entertainment and recreation",
+ "Mining and quarrying",
+ "Construction",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Other service activities",
+ "Electricity, gas, steam and air conditioning supply",
+ "Real estate activities",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Professional, scientific and technical activities",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "Female": [
+ 23900,
+ 24100,
+ 24000,
+ 23800,
+ 27900,
+ 25400,
+ 24100,
+ 24800,
+ 26000,
+ 23900,
+ 24500,
+ 25400,
+ 23300,
+ 23600,
+ 26000,
+ 26900,
+ 25800,
+ 25100,
+ 22600,
+ 25400,
+ 26500,
+ 23500
+ ],
+ "Male": [
+ 24800,
+ 25000,
+ 27000,
+ 24300,
+ 23600,
+ 25600,
+ 22800,
+ 25900,
+ 23700,
+ 25900,
+ 25400,
+ 24100,
+ 23400,
+ 25800,
+ 26600,
+ 26500,
+ 25700,
+ 25800,
+ 25500,
+ 23400,
+ 26000,
+ 25100
+ ],
+ "Female & Male": [
+ 23100,
+ 25500,
+ 23400,
+ 24900,
+ 24300,
+ 23300,
+ 24600,
+ 25300,
+ 24400,
+ 24500,
+ 26800,
+ 24300,
+ 23200,
+ 24700,
+ 24700,
+ 23200,
+ 25100,
+ 25200,
+ 25000,
+ 26700,
+ 23800,
+ 24500
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Residential nursing care activities",
+ "Other social work activities without accommodation",
+ "Other human health activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Residential care activities for the elderly and disabled",
+ "Other residential care activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Hospital activities",
+ "Medical and dental practice activities"
+ ],
+ "Female": [
+ 24900,
+ 26300,
+ 24300,
+ 24700,
+ 24900,
+ 26900,
+ 24700,
+ 24500,
+ 24600
+ ],
+ "Male": [
+ 25600,
+ 23100,
+ 26000,
+ 25500,
+ 23800,
+ 23600,
+ 24500,
+ 26000,
+ 24300
+ ],
+ "Female & Male": [
+ 26100,
+ 26300,
+ 26800,
+ 24000,
+ 25200,
+ 24400,
+ 25900,
+ 26800,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£26,300",
+ "£24,300",
+ "£24,700",
+ "£24,900",
+ "£26,900",
+ "£24,700",
+ "£24,500",
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,600",
+ "£23,100",
+ "£26,000",
+ "£25,500",
+ "£23,800",
+ "£23,600",
+ "£24,500",
+ "£26,000",
+ "£24,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,100",
+ "£26,300",
+ "£26,800",
+ "£24,000",
+ "£25,200",
+ "£24,400",
+ "£25,900",
+ "£26,800",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Event catering and other food service activities",
+ "Holiday and other short-stay accommodation",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Beverage serving activities",
+ "Other accommodation",
+ "Hotels and similar accommodation",
+ "Restaurants and mobile food service activities"
+ ],
+ "Female": [
+ 25700,
+ 25300,
+ 24300,
+ 25600,
+ 23900,
+ 25200,
+ 23700
+ ],
+ "Male": [
+ 23800,
+ 26300,
+ 22100,
+ 23700,
+ 25200,
+ 24600,
+ 24800
+ ],
+ "Female & Male": [
+ 27200,
+ 23600,
+ 25200,
+ 24700,
+ 24500,
+ 24800,
+ 23900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£25,300",
+ "£24,300",
+ "£25,600",
+ "£23,900",
+ "£25,200",
+ "£23,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£23,800",
+ "£26,300",
+ "£22,100",
+ "£23,700",
+ "£25,200",
+ "£24,600",
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£27,200",
+ "£23,600",
+ "£25,200",
+ "£24,700",
+ "£24,500",
+ "£24,800",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of cutlery; tools and general hardware",
+ "Treatment and coating of metals; machining",
+ "Manufacture of dairy products",
+ "Manufacture of irradiation; electromedical and electrotherapeutic equipment",
+ "Manufacture of metal forming machinery and machine tools",
+ "Manufacture of tanks; reservoirs and containers of metal",
+ "Manufacture of prepared animal feeds",
+ "Manufacture of beverages",
+ "Manufacture of motor vehicles",
+ "Casting of metals",
+ "Manufacture of computers and peripheral equipment",
+ "Manufacture of sports goods",
+ "Manufacture of knitted and crocheted apparel",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of railway locomotives and rolling stock",
+ "Manufacture of abrasive products and non-metallic mineral products n.e.c.",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Manufacture of parts and accessories for motor vehicles",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Tanning and dressing of leather; manufacture of luggage; handbags; saddlery and harness; dressing and dyeing of fur",
+ "Manufacture of other special-purpose machinery",
+ "Manufacture of other chemical products",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Manufacture of weapons and ammunition",
+ "Cutting; shaping and finishing of stone",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of other textiles",
+ "Manufacture of other products of first processing of steel",
+ "Printing and service activities related to printing",
+ "Manufacture of wearing apparel; except fur apparel",
+ "Forging; pressing; stamping and roll-forming of metal; powder metallurgy",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of vegetable and animal oils and fats",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of articles of fur",
+ "Manufacture of pulp; paper and paperboard",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacture of agricultural and forestry machinery",
+ "Manufacture of glass and glass products",
+ "Manufacture of structural metal products",
+ "Weaving of textiles",
+ "Manufacture of rubber products",
+ "Reproduction of recorded media",
+ "Manufacture of tubes; pipes; hollow profiles and related fittings; of steel",
+ "Manufacture of clay building materials",
+ "Manufacture of other food products",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of other porcelain and ceramic products",
+ "Manufacture of military fighting vehicles",
+ "Manufacture of batteries and accumulators",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of electronic components and boards",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of pesticides and other agrochemical products",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of jewellery; bijouterie and related articles",
+ "Sawmilling and planing of wood",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Manufacture of consumer electronics",
+ "Manufacture of refined petroleum products",
+ "Manufacturing n.e.c.",
+ "Manufacture of games and toys",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Manufacture of communication equipment",
+ "Preparation and spinning of textile fibres",
+ "Manufacture of footwear",
+ "Manufacture of domestic appliances",
+ "Manufacture of refractory products",
+ "Manufacture of transport equipment n.e.c.",
+ "Manufacture of plastics products",
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of musical instruments",
+ "Manufacture of wiring and wiring devices",
+ "Finishing of textiles",
+ "Manufacture of other electrical equipment",
+ "Manufacture of bodies (coachwork) for motor vehicles; manufacture of trailers and semi-trailers",
+ "Installation of industrial machinery and equipment",
+ "Building of ships and boats",
+ "Manufacture of steam generators; except central heating hot water boilers",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of furniture",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Processing and preserving of fish; crustaceans and molluscs"
+ ],
+ "Female": [
+ 25000,
+ 25300,
+ 22900,
+ 25200,
+ 25800,
+ 24400,
+ 24800,
+ 26600,
+ 25100,
+ 23100,
+ 25100,
+ 24300,
+ 24900,
+ 24500,
+ 25300,
+ 24400,
+ 25800,
+ 27400,
+ 26800,
+ 23700,
+ 25000,
+ 24500,
+ 25600,
+ 24800,
+ 24600,
+ 26300,
+ 26200,
+ 25200,
+ 23400,
+ 26200,
+ "NA",
+ 26100,
+ 24400,
+ 24100,
+ 26600,
+ 25500,
+ 24000,
+ 25900,
+ 24200,
+ 26600,
+ 25300,
+ 23700,
+ 25200,
+ 25600,
+ 24600,
+ 25200,
+ 25200,
+ 26600,
+ 24900,
+ 26500,
+ 25800,
+ 26200,
+ 23300,
+ 24100,
+ 25800,
+ 24100,
+ 23400,
+ 24500,
+ 26700,
+ 25200,
+ 24800,
+ 26000,
+ 24900,
+ 24900,
+ 25500,
+ 24600,
+ 25400,
+ 24100,
+ 24800,
+ 24000,
+ 25400,
+ 26300,
+ 25400,
+ 25100,
+ 26900,
+ 25900,
+ 24900,
+ "NA",
+ 24800,
+ 25700,
+ 26900,
+ 24400,
+ 25600,
+ 23600,
+ 22200,
+ 25300,
+ 25500,
+ 25800,
+ 26300,
+ 26100
+ ],
+ "Male": [
+ 25100,
+ 24700,
+ 25800,
+ 25700,
+ 25300,
+ 26100,
+ 25300,
+ 24000,
+ 24200,
+ 23700,
+ 25000,
+ 26300,
+ 23900,
+ 24800,
+ 26500,
+ 24900,
+ 23700,
+ 25000,
+ 25000,
+ 24400,
+ 26800,
+ 25900,
+ 23400,
+ 24900,
+ 25700,
+ 24500,
+ 25300,
+ 24300,
+ 25600,
+ 24700,
+ 26700,
+ 24800,
+ 24500,
+ 25900,
+ 23700,
+ 23700,
+ 24500,
+ "NA",
+ 25900,
+ 25900,
+ 24900,
+ 23700,
+ 24800,
+ 23900,
+ 23300,
+ 24100,
+ 26900,
+ 27100,
+ 24100,
+ 23900,
+ 24700,
+ 25500,
+ 25000,
+ 26400,
+ 25800,
+ 24300,
+ 24900,
+ 24500,
+ 23800,
+ 27400,
+ 27200,
+ 24100,
+ 26600,
+ 25200,
+ 25300,
+ 24400,
+ 25100,
+ 24800,
+ 24300,
+ 25500,
+ 23000,
+ 24700,
+ 25100,
+ 25500,
+ 24100,
+ 24100,
+ 24400,
+ 24700,
+ 25200,
+ 24900,
+ 24900,
+ 25700,
+ 25100,
+ 25000,
+ 22300,
+ 23600,
+ 25500,
+ 27400,
+ 24100,
+ 24500
+ ],
+ "Female & Male": [
+ 24200,
+ 24300,
+ 25700,
+ 24900,
+ 24800,
+ 24900,
+ 26000,
+ 24300,
+ 25500,
+ 25800,
+ 26300,
+ 25300,
+ 25000,
+ 24800,
+ 24700,
+ 23700,
+ 24700,
+ 23800,
+ 25900,
+ 25200,
+ 23900,
+ 25200,
+ 23600,
+ 26100,
+ 24200,
+ 25700,
+ 26100,
+ 25400,
+ 26000,
+ 24600,
+ 24400,
+ 26500,
+ 25300,
+ 25700,
+ 25100,
+ 25800,
+ 23400,
+ 27600,
+ 25300,
+ 27000,
+ 24800,
+ 24300,
+ 25700,
+ 24300,
+ 24600,
+ 24500,
+ 23000,
+ 23700,
+ 25400,
+ 24900,
+ 23600,
+ 25500,
+ 23300,
+ 26900,
+ 23300,
+ 22900,
+ 24700,
+ 23700,
+ 24600,
+ 24300,
+ 24400,
+ 23400,
+ 23200,
+ 25100,
+ 23400,
+ 25400,
+ 25100,
+ 26900,
+ 24400,
+ 23800,
+ 25700,
+ 24800,
+ 25000,
+ 26200,
+ 25900,
+ 23100,
+ 25000,
+ 25200,
+ 25500,
+ 25500,
+ 25700,
+ 22700,
+ 22700,
+ 23500,
+ 23700,
+ 25000,
+ 24500,
+ 24400,
+ 26000,
+ 24400
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,000",
+ "£25,300",
+ "£22,900",
+ "£25,200",
+ "£25,800",
+ "£24,400",
+ "£24,800",
+ "£26,600",
+ "£25,100",
+ "£23,100",
+ "£25,100",
+ "£24,300",
+ "£24,900",
+ "£24,500",
+ "£25,300",
+ "£24,400",
+ "£25,800",
+ "£27,400",
+ "£26,800",
+ "£23,700",
+ "£25,000",
+ "£24,500",
+ "£25,600",
+ "£24,800",
+ "£24,600",
+ "£26,300",
+ "£26,200",
+ "£25,200",
+ "£23,400",
+ "£26,200",
+ "x",
+ "£26,100",
+ "£24,400",
+ "£24,100",
+ "£26,600",
+ "£25,500",
+ "£24,000",
+ "£25,900",
+ "£24,200",
+ "£26,600",
+ "£25,300",
+ "£23,700",
+ "£25,200",
+ "£25,600",
+ "£24,600",
+ "£25,200",
+ "£25,200",
+ "£26,600",
+ "£24,900",
+ "£26,500",
+ "£25,800",
+ "£26,200",
+ "£23,300",
+ "£24,100",
+ "£25,800",
+ "£24,100",
+ "£23,400",
+ "£24,500",
+ "£26,700",
+ "£25,200",
+ "£24,800",
+ "£26,000",
+ "£24,900",
+ "£24,900",
+ "£25,500",
+ "£24,600",
+ "£25,400",
+ "£24,100",
+ "£24,800",
+ "£24,000",
+ "£25,400",
+ "£26,300",
+ "£25,400",
+ "£25,100",
+ "£26,900",
+ "£25,900",
+ "£24,900",
+ "x",
+ "£24,800",
+ "£25,700",
+ "£26,900",
+ "£24,400",
+ "£25,600",
+ "£23,600",
+ "£22,200",
+ "£25,300",
+ "£25,500",
+ "£25,800",
+ "£26,300",
+ "£26,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£24,700",
+ "£25,800",
+ "£25,700",
+ "£25,300",
+ "£26,100",
+ "£25,300",
+ "£24,000",
+ "£24,200",
+ "£23,700",
+ "£25,000",
+ "£26,300",
+ "£23,900",
+ "£24,800",
+ "£26,500",
+ "£24,900",
+ "£23,700",
+ "£25,000",
+ "£25,000",
+ "£24,400",
+ "£26,800",
+ "£25,900",
+ "£23,400",
+ "£24,900",
+ "£25,700",
+ "£24,500",
+ "£25,300",
+ "£24,300",
+ "£25,600",
+ "£24,700",
+ "£26,700",
+ "£24,800",
+ "£24,500",
+ "£25,900",
+ "£23,700",
+ "£23,700",
+ "£24,500",
+ "x",
+ "£25,900",
+ "£25,900",
+ "£24,900",
+ "£23,700",
+ "£24,800",
+ "£23,900",
+ "£23,300",
+ "£24,100",
+ "£26,900",
+ "£27,100",
+ "£24,100",
+ "£23,900",
+ "£24,700",
+ "£25,500",
+ "£25,000",
+ "£26,400",
+ "£25,800",
+ "£24,300",
+ "£24,900",
+ "£24,500",
+ "£23,800",
+ "£27,400",
+ "£27,200",
+ "£24,100",
+ "£26,600",
+ "£25,200",
+ "£25,300",
+ "£24,400",
+ "£25,100",
+ "£24,800",
+ "£24,300",
+ "£25,500",
+ "£23,000",
+ "£24,700",
+ "£25,100",
+ "£25,500",
+ "£24,100",
+ "£24,100",
+ "£24,400",
+ "£24,700",
+ "£25,200",
+ "£24,900",
+ "£24,900",
+ "£25,700",
+ "£25,100",
+ "£25,000",
+ "£22,300",
+ "£23,600",
+ "£25,500",
+ "£27,400",
+ "£24,100",
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,200",
+ "£24,300",
+ "£25,700",
+ "£24,900",
+ "£24,800",
+ "£24,900",
+ "£26,000",
+ "£24,300",
+ "£25,500",
+ "£25,800",
+ "£26,300",
+ "£25,300",
+ "£25,000",
+ "£24,800",
+ "£24,700",
+ "£23,700",
+ "£24,700",
+ "£23,800",
+ "£25,900",
+ "£25,200",
+ "£23,900",
+ "£25,200",
+ "£23,600",
+ "£26,100",
+ "£24,200",
+ "£25,700",
+ "£26,100",
+ "£25,400",
+ "£26,000",
+ "£24,600",
+ "£24,400",
+ "£26,500",
+ "£25,300",
+ "£25,700",
+ "£25,100",
+ "£25,800",
+ "£23,400",
+ "£27,600",
+ "£25,300",
+ "£27,000",
+ "£24,800",
+ "£24,300",
+ "£25,700",
+ "£24,300",
+ "£24,600",
+ "£24,500",
+ "£23,000",
+ "£23,700",
+ "£25,400",
+ "£24,900",
+ "£23,600",
+ "£25,500",
+ "£23,300",
+ "£26,900",
+ "£23,300",
+ "£22,900",
+ "£24,700",
+ "£23,700",
+ "£24,600",
+ "£24,300",
+ "£24,400",
+ "£23,400",
+ "£23,200",
+ "£25,100",
+ "£23,400",
+ "£25,400",
+ "£25,100",
+ "£26,900",
+ "£24,400",
+ "£23,800",
+ "£25,700",
+ "£24,800",
+ "£25,000",
+ "£26,200",
+ "£25,900",
+ "£23,100",
+ "£25,000",
+ "£25,200",
+ "£25,500",
+ "£25,500",
+ "£25,700",
+ "£22,700",
+ "£22,700",
+ "£23,500",
+ "£23,700",
+ "£25,000",
+ "£24,500",
+ "£24,400",
+ "£26,000",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Motion picture; video and television programme activities",
+ "Other telecommunications activities",
+ "Other information service activities",
+ "Television programming and broadcasting activities",
+ "Wired telecommunications activities",
+ "Data processing; hosting and related activities; web portals",
+ "Wireless telecommunications activities",
+ "Software publishing",
+ "Satellite telecommunications activities",
+ "Radio broadcasting",
+ "Publishing of books; periodicals and other publishing activities",
+ "Sound recording and music publishing activities",
+ "Computer programming; consultancy and related activities"
+ ],
+ "Female": [
+ 25900,
+ 25000,
+ 26400,
+ 26100,
+ 22800,
+ 24000,
+ 24400,
+ 24300,
+ 25500,
+ 26100,
+ 25200,
+ 25100,
+ 24400
+ ],
+ "Male": [
+ 25000,
+ 25700,
+ 27100,
+ 23700,
+ 25300,
+ 25800,
+ 25000,
+ 25000,
+ 23400,
+ 22700,
+ 23800,
+ 26900,
+ 27400
+ ],
+ "Female & Male": [
+ 24100,
+ 26500,
+ 24400,
+ 26600,
+ 26400,
+ 25600,
+ 23400,
+ 25200,
+ 24800,
+ 25100,
+ 25100,
+ 24900,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,900",
+ "£25,000",
+ "£26,400",
+ "£26,100",
+ "£22,800",
+ "£24,000",
+ "£24,400",
+ "£24,300",
+ "£25,500",
+ "£26,100",
+ "£25,200",
+ "£25,100",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,000",
+ "£25,700",
+ "£27,100",
+ "£23,700",
+ "£25,300",
+ "£25,800",
+ "£25,000",
+ "£25,000",
+ "£23,400",
+ "£22,700",
+ "£23,800",
+ "£26,900",
+ "£27,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,100",
+ "£26,500",
+ "£24,400",
+ "£26,600",
+ "£26,400",
+ "£25,600",
+ "£23,400",
+ "£25,200",
+ "£24,800",
+ "£25,100",
+ "£25,100",
+ "£24,900",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Trusts; funds and similar financial entities",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Activities of holding companies",
+ "Monetary intermediation",
+ "Insurance",
+ "Pension funding",
+ "Fund management activities",
+ "Reinsurance",
+ "Other financial service activities; except insurance and pension funding",
+ "Activities auxiliary to insurance and pension funding"
+ ],
+ "Female": [
+ 25200,
+ 24400,
+ 25600,
+ 25900,
+ 24100,
+ 24600,
+ 24800,
+ 25400,
+ 26100,
+ 23900
+ ],
+ "Male": [
+ 26800,
+ 26600,
+ 25700,
+ 25900,
+ 25700,
+ 25600,
+ 25500,
+ 24200,
+ 25400,
+ 24600
+ ],
+ "Female & Male": [
+ 23800,
+ 24900,
+ 26800,
+ 23500,
+ 24900,
+ 24700,
+ 24500,
+ 24900,
+ 25600,
+ 24400
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,200",
+ "£24,400",
+ "£25,600",
+ "£25,900",
+ "£24,100",
+ "£24,600",
+ "£24,800",
+ "£25,400",
+ "£26,100",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,800",
+ "£26,600",
+ "£25,700",
+ "£25,900",
+ "£25,700",
+ "£25,600",
+ "£25,500",
+ "£24,200",
+ "£25,400",
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,800",
+ "£24,900",
+ "£26,800",
+ "£23,500",
+ "£24,900",
+ "£24,700",
+ "£24,500",
+ "£24,900",
+ "£25,600",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Renting and leasing of motor vehicles",
+ "Other reservation service and related activities",
+ "Other human resources provision",
+ "Private security activities",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Business support service activities n.e.c.",
+ "Leasing of intellectual property and similar products; except copyrighted works",
+ "Renting and leasing of personal and household goods",
+ "Combined facilities support activities",
+ "Landscape service activities",
+ "Investigation activities",
+ "Travel agency and tour operator activities",
+ "Activities of employment placement agencies",
+ "Office administrative and support activities",
+ "Security systems service activities",
+ "Organisation of conventions and trade shows",
+ "Temporary employment agency activities",
+ "Activities of call centres",
+ "Cleaning activities"
+ ],
+ "Female": [
+ 25500,
+ 25700,
+ 23800,
+ 25000,
+ 23800,
+ 25300,
+ 26100,
+ 24800,
+ 24200,
+ 24500,
+ 23400,
+ 25600,
+ 24200,
+ 24500,
+ 23600,
+ 25800,
+ 23900,
+ 24900,
+ 23900
+ ],
+ "Male": [
+ 25800,
+ 25900,
+ 25200,
+ 25300,
+ 24800,
+ 26500,
+ 27000,
+ 24800,
+ 25700,
+ 25000,
+ 25300,
+ 26300,
+ 26500,
+ 24400,
+ 26900,
+ 24800,
+ 24400,
+ 27100,
+ 26900
+ ],
+ "Female & Male": [
+ 24800,
+ 24100,
+ 24900,
+ 24200,
+ 23900,
+ 23900,
+ 24300,
+ 26300,
+ 24600,
+ 24900,
+ 24100,
+ 25900,
+ 23800,
+ 26500,
+ 25500,
+ 24700,
+ 26200,
+ 24200,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£25,700",
+ "£23,800",
+ "£25,000",
+ "£23,800",
+ "£25,300",
+ "£26,100",
+ "£24,800",
+ "£24,200",
+ "£24,500",
+ "£23,400",
+ "£25,600",
+ "£24,200",
+ "£24,500",
+ "£23,600",
+ "£25,800",
+ "£23,900",
+ "£24,900",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,800",
+ "£25,900",
+ "£25,200",
+ "£25,300",
+ "£24,800",
+ "£26,500",
+ "£27,000",
+ "£24,800",
+ "£25,700",
+ "£25,000",
+ "£25,300",
+ "£26,300",
+ "£26,500",
+ "£24,400",
+ "£26,900",
+ "£24,800",
+ "£24,400",
+ "£27,100",
+ "£26,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,800",
+ "£24,100",
+ "£24,900",
+ "£24,200",
+ "£23,900",
+ "£23,900",
+ "£24,300",
+ "£26,300",
+ "£24,600",
+ "£24,900",
+ "£24,100",
+ "£25,900",
+ "£23,800",
+ "£26,500",
+ "£25,500",
+ "£24,700",
+ "£26,200",
+ "£24,200",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "group_name": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "Female": [
+ 25200
+ ],
+ "Male": [
+ 24200
+ ],
+ "Female & Male": [
+ 24500
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Other passenger land transport",
+ "Warehousing and storage",
+ "Sea and coastal freight water transport",
+ "Sea and coastal passenger water transport",
+ "Other postal and courier activities",
+ "Freight rail transport",
+ "Postal activities under universal service obligation",
+ "Freight air transport and space transport",
+ "Passenger rail transport; interurban",
+ "Support activities for transportation",
+ "Inland passenger water transport",
+ "Passenger air transport",
+ "Freight transport by road and removal services",
+ "Inland freight water transport",
+ "Transport via pipeline"
+ ],
+ "Female": [
+ 23800,
+ 25300,
+ 24200,
+ 24500,
+ 25500,
+ 25400,
+ 24700,
+ 25400,
+ 24600,
+ 25800,
+ 25300,
+ 24600,
+ 24700,
+ "NA",
+ 25000
+ ],
+ "Male": [
+ 24300,
+ 24700,
+ 24500,
+ 24600,
+ 25600,
+ 25300,
+ 25300,
+ 25300,
+ 25000,
+ 23700,
+ 24700,
+ 25700,
+ 24800,
+ 24900,
+ 25600
+ ],
+ "Female & Male": [
+ 25500,
+ 25800,
+ 25300,
+ 24600,
+ 23800,
+ 23600,
+ 25500,
+ 24900,
+ 25200,
+ 25400,
+ 24900,
+ 24600,
+ 24500,
+ 25500,
+ 24500
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,800",
+ "£25,300",
+ "£24,200",
+ "£24,500",
+ "£25,500",
+ "£25,400",
+ "£24,700",
+ "£25,400",
+ "£24,600",
+ "£25,800",
+ "£25,300",
+ "£24,600",
+ "£24,700",
+ "x",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "£24,700",
+ "£24,500",
+ "£24,600",
+ "£25,600",
+ "£25,300",
+ "£25,300",
+ "£25,300",
+ "£25,000",
+ "£23,700",
+ "£24,700",
+ "£25,700",
+ "£24,800",
+ "£24,900",
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£25,800",
+ "£25,300",
+ "£24,600",
+ "£23,800",
+ "£23,600",
+ "£25,500",
+ "£24,900",
+ "£25,200",
+ "£25,400",
+ "£24,900",
+ "£24,600",
+ "£24,500",
+ "£25,500",
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Other education",
+ "Secondary education",
+ "Primary education",
+ "Educational support activities",
+ "Pre-primary education",
+ "Higher education"
+ ],
+ "Female": [
+ 25000,
+ 25400,
+ 26200,
+ 23800,
+ 25200,
+ 22800
+ ],
+ "Male": [
+ 24800,
+ 22700,
+ 26300,
+ 26300,
+ 24700,
+ 24700
+ ],
+ "Female & Male": [
+ 24300,
+ 25000,
+ 23900,
+ 25700,
+ 24900,
+ 24700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,000",
+ "£25,400",
+ "£26,200",
+ "£23,800",
+ "£25,200",
+ "£22,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,800",
+ "£22,700",
+ "£26,300",
+ "£26,300",
+ "£24,700",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "£25,000",
+ "£23,900",
+ "£25,700",
+ "£24,900",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of wearing apparel; except fur apparel",
+ "Sawmilling and planing of wood",
+ "Manufacture of musical instruments",
+ "Manufacture of jewellery; bijouterie and related articles",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Not known",
+ "Manufacture of articles of fur",
+ "Manufacture of knitted and crocheted apparel"
+ ],
+ "Female": [
+ 25700,
+ 24500,
+ 23600,
+ 23700,
+ 23900,
+ 26200,
+ 25800,
+ 25100
+ ],
+ "Male": [
+ 24000,
+ 26300,
+ 24700,
+ 25100,
+ 26600,
+ 25800,
+ 25200,
+ 24200
+ ],
+ "Female & Male": [
+ 25700,
+ 24300,
+ 27000,
+ 24700,
+ 25200,
+ 24700,
+ 24500,
+ 25000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£24,500",
+ "£23,600",
+ "£23,700",
+ "£23,900",
+ "£26,200",
+ "£25,800",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£26,300",
+ "£24,700",
+ "£25,100",
+ "£26,600",
+ "£25,800",
+ "£25,200",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£24,300",
+ "£27,000",
+ "£24,700",
+ "£25,200",
+ "£24,700",
+ "£24,500",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole",
+ "Compulsory social security activities"
+ ],
+ "Female": [
+ 27200,
+ 26000,
+ 23900
+ ],
+ "Male": [
+ 25800,
+ 24400,
+ 26100
+ ],
+ "Female & Male": [
+ 24700,
+ 24700,
+ 24700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£27,200",
+ "£26,000",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,800",
+ "£24,400",
+ "£26,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£24,700",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Creative; arts and entertainment activities",
+ "Gambling and betting activities",
+ "Amusement and recreation activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Sports activities"
+ ],
+ "Female": [
+ 25000,
+ 25500,
+ 25000,
+ 25700,
+ 25600
+ ],
+ "Male": [
+ 24900,
+ 27000,
+ 25800,
+ 23600,
+ 24100
+ ],
+ "Female & Male": [
+ 24400,
+ 23800,
+ 24400,
+ 24600,
+ 25000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,000",
+ "£25,500",
+ "£25,000",
+ "£25,700",
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£27,000",
+ "£25,800",
+ "£23,600",
+ "£24,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,400",
+ "£23,800",
+ "£24,400",
+ "£24,600",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying",
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Not known",
+ "Combined facilities support activities",
+ "Computer programming; consultancy and related activities",
+ "Activities of extraterritorial organisations and bodies",
+ "Libraries; archives; museums and other cultural activities",
+ "Cleaning activities"
+ ],
+ "Female": [
+ 25100,
+ 25500,
+ "NA",
+ "NA",
+ 26100,
+ 23100
+ ],
+ "Male": [
+ 22700,
+ 27300,
+ 24800,
+ 23000,
+ 24900,
+ 24100
+ ],
+ "Female & Male": [
+ 24000,
+ 26600,
+ 26000,
+ 25300,
+ 22700,
+ 25800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£25,500",
+ "x",
+ "x",
+ "£26,100",
+ "£23,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£22,700",
+ "£27,300",
+ "£24,800",
+ "£23,000",
+ "£24,900",
+ "£24,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£26,600",
+ "£26,000",
+ "£25,300",
+ "£22,700",
+ "£25,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Demolition and site preparation",
+ "Building completion and finishing",
+ "Electrical; plumbing and other construction installation activities",
+ "Construction of other civil engineering projects",
+ "Construction of utility projects",
+ "Construction of residential and non-residential buildings",
+ "Development of building projects",
+ "Other specialised construction activities",
+ "Construction of roads and railways"
+ ],
+ "Female": [
+ 25700,
+ 22800,
+ 24700,
+ 26300,
+ 25300,
+ 25000,
+ 24300,
+ 26000,
+ 24000
+ ],
+ "Male": [
+ 26400,
+ 23400,
+ 23800,
+ 24500,
+ 24900,
+ 25600,
+ 25500,
+ 25300,
+ 23800
+ ],
+ "Female & Male": [
+ 24600,
+ 23800,
+ 26500,
+ 24600,
+ 25800,
+ 26700,
+ 28300,
+ 25100,
+ 26300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£22,800",
+ "£24,700",
+ "£26,300",
+ "£25,300",
+ "£25,000",
+ "£24,300",
+ "£26,000",
+ "£24,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400",
+ "£23,400",
+ "£23,800",
+ "£24,500",
+ "£24,900",
+ "£25,600",
+ "£25,500",
+ "£25,300",
+ "£23,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,600",
+ "£23,800",
+ "£26,500",
+ "£24,600",
+ "£25,800",
+ "£26,700",
+ "£28,300",
+ "£25,100",
+ "£26,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Water collection; treatment and supply",
+ "Materials recovery",
+ "Sewerage",
+ "Remediation activities and other waste management services",
+ "Waste treatment and disposal",
+ "Waste collection"
+ ],
+ "Female": [
+ 26300,
+ 24600,
+ 27200,
+ 25600,
+ 24600,
+ 25600
+ ],
+ "Male": [
+ 25800,
+ 23100,
+ 24900,
+ 26200,
+ 24100,
+ 25200
+ ],
+ "Female & Male": [
+ 23600,
+ 25800,
+ 25600,
+ 23700,
+ 25100,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£26,300",
+ "£24,600",
+ "£27,200",
+ "£25,600",
+ "£24,600",
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,800",
+ "£23,100",
+ "£24,900",
+ "£26,200",
+ "£24,100",
+ "£25,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,600",
+ "£25,800",
+ "£25,600",
+ "£23,700",
+ "£25,100",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Repair of personal and household goods",
+ "Repair of computers and communication equipment",
+ "Activities of business; employers and professional membership organisations",
+ "Activities of other membership organisations",
+ "Activities of trade unions",
+ "Other personal service activities"
+ ],
+ "Female": [
+ 24700,
+ 24200,
+ 23500,
+ 23800,
+ 25700,
+ 25500
+ ],
+ "Male": [
+ 23600,
+ 25700,
+ 25300,
+ 23400,
+ 25700,
+ 26400
+ ],
+ "Female & Male": [
+ 24000,
+ 23100,
+ 23500,
+ 26000,
+ 26200,
+ 26000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£24,200",
+ "£23,500",
+ "£23,800",
+ "£25,700",
+ "£25,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£23,600",
+ "£25,700",
+ "£25,300",
+ "£23,400",
+ "£25,700",
+ "£26,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£23,100",
+ "£23,500",
+ "£26,000",
+ "£26,200",
+ "£26,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Manufacture of gas; distribution of gaseous fuels through mains"
+ ],
+ "Female": [
+ 24900,
+ 26000
+ ],
+ "Male": [
+ 25500,
+ 26300
+ ],
+ "Female & Male": [
+ 24900,
+ 24600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£26,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£26,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Buying and selling of own real estate",
+ "Real estate activities on a fee or contract basis",
+ "Renting and operating of own or leased real estate"
+ ],
+ "Female": [
+ 25300,
+ 25200,
+ 24800
+ ],
+ "Male": [
+ 24800,
+ 26100,
+ 24200
+ ],
+ "Female & Male": [
+ 26500,
+ 25900,
+ 24400
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,300",
+ "£25,200",
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,800",
+ "£26,100",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,500",
+ "£25,900",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Undifferentiated goods-producing activities of private households for own use",
+ "Activities of households as employers of domestic personnel"
+ ],
+ "Female": [
+ 25400,
+ 27000
+ ],
+ "Male": [
+ "NA",
+ 26500
+ ],
+ "Female & Male": [
+ 25600,
+ 24200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,400",
+ "£27,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,600",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Architectural and engineering activities and related technical consultancy",
+ "Research and experimental development on social sciences and humanities",
+ "Translation and interpretation activities",
+ "Specialised design activities",
+ "Advertising",
+ "Veterinary activities",
+ "Technical testing and analysis",
+ "Management consultancy activities",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Photographic activities",
+ "Research and experimental development on natural sciences and engineering",
+ "Activities of head offices",
+ "Legal activities",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Market research and public opinion polling"
+ ],
+ "Female": [
+ 26100,
+ 24400,
+ 26100,
+ 24300,
+ 25300,
+ 24000,
+ 24200,
+ 25000,
+ 22800,
+ 24500,
+ 25400,
+ 23500,
+ 23600,
+ 24300,
+ 26500
+ ],
+ "Male": [
+ 22700,
+ 24400,
+ 25800,
+ 23400,
+ 25600,
+ 25600,
+ 23500,
+ 24900,
+ 23000,
+ 24900,
+ 24300,
+ 25800,
+ 25400,
+ 24600,
+ 25700
+ ],
+ "Female & Male": [
+ 25000,
+ 26200,
+ 23800,
+ 24300,
+ 25500,
+ 25200,
+ 25400,
+ 24800,
+ 25700,
+ 25500,
+ 22500,
+ 24500,
+ 25100,
+ 23300,
+ 23700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£26,100",
+ "£24,400",
+ "£26,100",
+ "£24,300",
+ "£25,300",
+ "£24,000",
+ "£24,200",
+ "£25,000",
+ "£22,800",
+ "£24,500",
+ "£25,400",
+ "£23,500",
+ "£23,600",
+ "£24,300",
+ "£26,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£22,700",
+ "£24,400",
+ "£25,800",
+ "£23,400",
+ "£25,600",
+ "£25,600",
+ "£23,500",
+ "£24,900",
+ "£23,000",
+ "£24,900",
+ "£24,300",
+ "£25,800",
+ "£25,400",
+ "£24,600",
+ "£25,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,000",
+ "£26,200",
+ "£23,800",
+ "£24,300",
+ "£25,500",
+ "£25,200",
+ "£25,400",
+ "£24,800",
+ "£25,700",
+ "£25,500",
+ "£22,500",
+ "£24,500",
+ "£25,100",
+ "£23,300",
+ "£23,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Non-specialised wholesale trade",
+ "Sale of motor vehicles",
+ "Wholesale on a fee or contract basis",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Wholesale of agricultural raw materials and live animals",
+ "Wholesale of other machinery; equipment and supplies",
+ "Wholesale of information and communication equipment",
+ "Retail trade not in stores; stalls or markets",
+ "Retail sale via stalls and markets",
+ "Retail sale of other household equipment in specialised stores",
+ "Wholesale of food; beverages and tobacco",
+ "Retail sale in non-specialised stores",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Maintenance and repair of motor vehicles",
+ "Retail sale of automotive fuel in specialised stores",
+ "Sale of motor vehicle parts and accessories",
+ "Retail sale of other goods in specialised stores",
+ "Sale; maintenance and repair of motorcycles and related parts and accessories",
+ "Other specialised wholesale",
+ "Wholesale of household goods"
+ ],
+ "Female": [
+ 24200,
+ 24800,
+ 24600,
+ 24200,
+ 25900,
+ 25700,
+ 25500,
+ 25600,
+ 24500,
+ 25600,
+ 26100,
+ 25300,
+ 24200,
+ 24800,
+ 25800,
+ 24000,
+ 25400,
+ 26100,
+ 25200,
+ 24900,
+ 24800
+ ],
+ "Male": [
+ 27100,
+ 25300,
+ 25800,
+ 23600,
+ 26000,
+ 23600,
+ 24600,
+ 22400,
+ 26100,
+ 25600,
+ 26200,
+ 23500,
+ 24400,
+ 25800,
+ 25500,
+ 24400,
+ 25500,
+ 24100,
+ 25000,
+ 26900,
+ 25100
+ ],
+ "Female & Male": [
+ 25800,
+ 25100,
+ 26300,
+ 25900,
+ 24100,
+ 25800,
+ 24800,
+ 23900,
+ 26000,
+ 25600,
+ 24100,
+ 25500,
+ 26000,
+ 27200,
+ 24200,
+ 26300,
+ 26500,
+ 26200,
+ 25600,
+ 24600,
+ 25000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,200",
+ "£24,800",
+ "£24,600",
+ "£24,200",
+ "£25,900",
+ "£25,700",
+ "£25,500",
+ "£25,600",
+ "£24,500",
+ "£25,600",
+ "£26,100",
+ "£25,300",
+ "£24,200",
+ "£24,800",
+ "£25,800",
+ "£24,000",
+ "£25,400",
+ "£26,100",
+ "£25,200",
+ "£24,900",
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£27,100",
+ "£25,300",
+ "£25,800",
+ "£23,600",
+ "£26,000",
+ "£23,600",
+ "£24,600",
+ "£22,400",
+ "£26,100",
+ "£25,600",
+ "£26,200",
+ "£23,500",
+ "£24,400",
+ "£25,800",
+ "£25,500",
+ "£24,400",
+ "£25,500",
+ "£24,100",
+ "£25,000",
+ "£26,900",
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,800",
+ "£25,100",
+ "£26,300",
+ "£25,900",
+ "£24,100",
+ "£25,800",
+ "£24,800",
+ "£23,900",
+ "£26,000",
+ "£25,600",
+ "£24,100",
+ "£25,500",
+ "£26,000",
+ "£27,200",
+ "£24,200",
+ "£26,300",
+ "£26,500",
+ "£26,200",
+ "£25,600",
+ "£24,600",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "Female": [
+ 22700
+ ],
+ "Male": [
+ 24900
+ ],
+ "Female & Male": [
+ 25800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£22,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,900",
+ "£24,100",
+ "£24,000",
+ "£23,800",
+ "£27,900",
+ "£25,400",
+ "£24,100",
+ "£24,800",
+ "£26,000",
+ "£23,900",
+ "£24,500",
+ "£25,400",
+ "£23,300",
+ "£23,600",
+ "£26,000",
+ "£26,900",
+ "£25,800",
+ "£25,100",
+ "£22,600",
+ "£25,400",
+ "£26,500",
+ "£23,500"
+ ],
+ "footer": "25,875",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,800",
+ "£25,000",
+ "£27,000",
+ "£24,300",
+ "£23,600",
+ "£25,600",
+ "£22,800",
+ "£25,900",
+ "£23,700",
+ "£25,900",
+ "£25,400",
+ "£24,100",
+ "£23,400",
+ "£25,800",
+ "£26,600",
+ "£26,500",
+ "£25,700",
+ "£25,800",
+ "£25,500",
+ "£23,400",
+ "£26,000",
+ "£25,100"
+ ],
+ "footer": "26,110",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,100",
+ "£25,500",
+ "£23,400",
+ "£24,900",
+ "£24,300",
+ "£23,300",
+ "£24,600",
+ "£25,300",
+ "£24,400",
+ "£24,500",
+ "£26,800",
+ "£24,300",
+ "£23,200",
+ "£24,700",
+ "£24,700",
+ "£23,200",
+ "£25,100",
+ "£25,200",
+ "£25,000",
+ "£26,700",
+ "£23,800",
+ "£24,500"
+ ],
+ "footer": "26,345",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27900\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of all subjects, 5 years after graduation, the industry with the highest proportion of female graduates is Transportation and storage<\/b>, and the\n median earnings of females in this industry were £24,800<\/b>. The industry\n with the highest proportion of male graduates was Electricity, gas, steam and air conditioning supply<\/b> and the median earnings of males\n in this industry were £25,700<\/b>.
The biggest difference in proportions is seen in Transportation and storage<\/b> where the proportion of female graduates is 9.5 percentage points higher<\/b> than the proportion of male graduates. The biggest difference in median earnings is seen in Financial and insurance activities<\/b> where the median earnings of female graduates were £4,300 higher<\/b> than the median earnings of male graduates.The group with the highest earnings was female graduates in the Financial and insurance activities <\/b> industry (median earnings of £27,900<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of all subjects by sex, five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_2.json b/tests/shinytest/testUI-current/subjectByIndustry_2.json
new file mode 100644
index 0000000..96df2df
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_2.json
@@ -0,0 +1,3388 @@
+{
+ "input": {
+ "countinput2": "sex",
+ "crosstabs.subjectinput": "All",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Education",
+ "Administrative and support service activities",
+ "Information and communication",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Transportation and storage",
+ "Construction",
+ "Financial and insurance activities",
+ "Arts, entertainment and recreation",
+ "Electricity, gas, steam and air conditioning supply",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Professional, scientific and technical activities",
+ "Human health and social work activities",
+ "Mining and quarrying",
+ "Accommodation and food service activities",
+ "Other service activities",
+ "Manufacturing",
+ "Agriculture, forestry and fishing",
+ "Real estate activities",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "Female": [
+ 25000,
+ 26900,
+ 24300,
+ 24200,
+ "NA",
+ 25200,
+ 24300,
+ 24000,
+ 27200,
+ 24700,
+ 24100,
+ 25900,
+ 25100,
+ 27100,
+ 24700,
+ 25700,
+ 23900,
+ 24200,
+ 23800,
+ 26100,
+ 25300
+ ],
+ "Male": [
+ 24500,
+ 25200,
+ 25000,
+ 24300,
+ 23600,
+ 25700,
+ 27300,
+ 25500,
+ 22600,
+ 23900,
+ 24100,
+ 25800,
+ 24700,
+ 23000,
+ 26500,
+ 23500,
+ 26200,
+ 24900,
+ 23600,
+ 25400,
+ 23400
+ ],
+ "Female & Male": [
+ 25300,
+ 24300,
+ 24600,
+ 24900,
+ 23500,
+ 24000,
+ 26400,
+ 26400,
+ 26200,
+ 24800,
+ 27100,
+ 23400,
+ 24900,
+ 25700,
+ 25800,
+ 24800,
+ 26000,
+ 26900,
+ 26500,
+ 23800,
+ 23300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Compulsory social security activities",
+ "Provision of services to the community as a whole",
+ "Administration of the State and the economic and social policy of the community"
+ ],
+ "Female": [
+ "NA",
+ 24100,
+ 24700
+ ],
+ "Male": [
+ 24300,
+ 26100,
+ 24700
+ ],
+ "Female & Male": [
+ 24900,
+ 25600,
+ 25000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,100",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "£26,100",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£25,600",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Pre-primary education",
+ "Higher education",
+ "Primary education",
+ "Secondary education",
+ "Other education",
+ "Educational support activities"
+ ],
+ "Female": [
+ 25500,
+ 23100,
+ 23800,
+ 26500,
+ 24600,
+ 25900
+ ],
+ "Male": [
+ 24700,
+ 26100,
+ 26700,
+ 25500,
+ 25000,
+ 24500
+ ],
+ "Female & Male": [
+ 26500,
+ 23400,
+ 25800,
+ 26200,
+ 25900,
+ 24600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£23,100",
+ "£23,800",
+ "£26,500",
+ "£24,600",
+ "£25,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£26,100",
+ "£26,700",
+ "£25,500",
+ "£25,000",
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,500",
+ "£23,400",
+ "£25,800",
+ "£26,200",
+ "£25,900",
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Leasing of intellectual property and similar products; except copyrighted works",
+ "Renting and leasing of motor vehicles",
+ "Business support service activities n.e.c.",
+ "Organisation of conventions and trade shows",
+ "Temporary employment agency activities",
+ "Activities of employment placement agencies",
+ "Other reservation service and related activities",
+ "Other human resources provision",
+ "Combined facilities support activities",
+ "Travel agency and tour operator activities",
+ "Activities of call centres",
+ "Office administrative and support activities",
+ "Renting and leasing of other machinery; equipment and tangible goods"
+ ],
+ "Female": [
+ 24000,
+ 24800,
+ 27600,
+ 24700,
+ 27000,
+ 25000,
+ 23700,
+ "NA",
+ 25100,
+ 24300,
+ "NA",
+ 25500,
+ "NA"
+ ],
+ "Male": [
+ 26400,
+ 23800,
+ 25100,
+ 25700,
+ 27500,
+ 24000,
+ "NA",
+ 25800,
+ "NA",
+ 24000,
+ 24000,
+ 26400,
+ 23900
+ ],
+ "Female & Male": [
+ 26400,
+ 25600,
+ 25500,
+ 26000,
+ 26200,
+ 23800,
+ 24300,
+ 26400,
+ 26200,
+ 25300,
+ 25400,
+ 24100,
+ 25900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£24,800",
+ "£27,600",
+ "£24,700",
+ "£27,000",
+ "£25,000",
+ "£23,700",
+ "x",
+ "£25,100",
+ "£24,300",
+ "x",
+ "£25,500",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400",
+ "£23,800",
+ "£25,100",
+ "£25,700",
+ "£27,500",
+ "£24,000",
+ "x",
+ "£25,800",
+ "x",
+ "£24,000",
+ "£24,000",
+ "£26,400",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400",
+ "£25,600",
+ "£25,500",
+ "£26,000",
+ "£26,200",
+ "£23,800",
+ "£24,300",
+ "£26,400",
+ "£26,200",
+ "£25,300",
+ "£25,400",
+ "£24,100",
+ "£25,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Satellite telecommunications activities",
+ "Sound recording and music publishing activities",
+ "Wireless telecommunications activities",
+ "Data processing; hosting and related activities; web portals",
+ "Computer programming; consultancy and related activities",
+ "Television programming and broadcasting activities",
+ "Software publishing",
+ "Publishing of books; periodicals and other publishing activities",
+ "Other telecommunications activities",
+ "Motion picture; video and television programme activities",
+ "Other information service activities"
+ ],
+ "Female": [
+ "NA",
+ "NA",
+ 25000,
+ 25700,
+ 25400,
+ 23100,
+ 24000,
+ 24300,
+ 25600,
+ 24700,
+ 26400
+ ],
+ "Male": [
+ 24000,
+ 24900,
+ 26200,
+ 25800,
+ 24800,
+ 24800,
+ 24200,
+ 26700,
+ 26800,
+ 24800,
+ 25400
+ ],
+ "Female & Male": [
+ 25100,
+ 26000,
+ 25200,
+ 22800,
+ 25200,
+ 25900,
+ 26200,
+ 26000,
+ 25600,
+ 25200,
+ 23200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,000",
+ "£25,700",
+ "£25,400",
+ "£23,100",
+ "£24,000",
+ "£24,300",
+ "£25,600",
+ "£24,700",
+ "£26,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£24,900",
+ "£26,200",
+ "£25,800",
+ "£24,800",
+ "£24,800",
+ "£24,200",
+ "£26,700",
+ "£26,800",
+ "£24,800",
+ "£25,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£26,000",
+ "£25,200",
+ "£22,800",
+ "£25,200",
+ "£25,900",
+ "£26,200",
+ "£26,000",
+ "£25,600",
+ "£25,200",
+ "£23,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel"
+ ],
+ "Female": [
+ "NA"
+ ],
+ "Male": [
+ 25200
+ ],
+ "Female & Male": [
+ 24200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Wholesale of food; beverages and tobacco",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Wholesale on a fee or contract basis",
+ "Retail sale of automotive fuel in specialised stores",
+ "Retail sale of other goods in specialised stores",
+ "Maintenance and repair of motor vehicles",
+ "Wholesale of other machinery; equipment and supplies",
+ "Retail sale of other household equipment in specialised stores",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Other specialised wholesale",
+ "Wholesale of information and communication equipment",
+ "Retail trade not in stores; stalls or markets",
+ "Retail sale in non-specialised stores",
+ "Wholesale of household goods",
+ "Sale of motor vehicle parts and accessories"
+ ],
+ "Female": [
+ 23800,
+ 25300,
+ 23200,
+ 26100,
+ 26500,
+ 25200,
+ 25000,
+ 26100,
+ 26300,
+ 25700,
+ 24800,
+ 23600,
+ 24100,
+ 25900,
+ 26000
+ ],
+ "Male": [
+ 25500,
+ 25600,
+ 26400,
+ 26200,
+ 25100,
+ 25800,
+ 25500,
+ 25400,
+ "NA",
+ 25500,
+ 25900,
+ 24700,
+ 25900,
+ 27500,
+ "NA"
+ ],
+ "Female & Male": [
+ 26400,
+ 24600,
+ 23900,
+ 25600,
+ 24300,
+ 25600,
+ 24500,
+ 24300,
+ 24800,
+ 25800,
+ 24900,
+ 23900,
+ 27500,
+ 23600,
+ 26200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,800",
+ "£25,300",
+ "£23,200",
+ "£26,100",
+ "£26,500",
+ "£25,200",
+ "£25,000",
+ "£26,100",
+ "£26,300",
+ "£25,700",
+ "£24,800",
+ "£23,600",
+ "£24,100",
+ "£25,900",
+ "£26,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£25,600",
+ "£26,400",
+ "£26,200",
+ "£25,100",
+ "£25,800",
+ "£25,500",
+ "£25,400",
+ "x",
+ "£25,500",
+ "£25,900",
+ "£24,700",
+ "£25,900",
+ "£27,500",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400",
+ "£24,600",
+ "£23,900",
+ "£25,600",
+ "£24,300",
+ "£25,600",
+ "£24,500",
+ "£24,300",
+ "£24,800",
+ "£25,800",
+ "£24,900",
+ "£23,900",
+ "£27,500",
+ "£23,600",
+ "£26,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Other postal and courier activities",
+ "Postal activities under universal service obligation",
+ "Support activities for transportation",
+ "Freight transport by road and removal services",
+ "Warehousing and storage",
+ "Freight rail transport",
+ "Other passenger land transport"
+ ],
+ "Female": [
+ "NA",
+ 23800,
+ 25900,
+ 25600,
+ 24100,
+ 25600,
+ "NA"
+ ],
+ "Male": [
+ 24600,
+ "NA",
+ 26300,
+ 25900,
+ 25400,
+ "NA",
+ 23900
+ ],
+ "Female & Male": [
+ 25600,
+ 23600,
+ 22900,
+ 25900,
+ 25600,
+ 24400,
+ 23600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,800",
+ "£25,900",
+ "£25,600",
+ "£24,100",
+ "£25,600",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,600",
+ "x",
+ "£26,300",
+ "£25,900",
+ "£25,400",
+ "x",
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,600",
+ "£23,600",
+ "£22,900",
+ "£25,900",
+ "£25,600",
+ "£24,400",
+ "£23,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Construction of residential and non-residential buildings",
+ "Building completion and finishing",
+ "Construction of other civil engineering projects",
+ "Development of building projects",
+ "Construction of utility projects",
+ "Electrical; plumbing and other construction installation activities",
+ "Construction of roads and railways"
+ ],
+ "Female": [
+ 24200,
+ "NA",
+ "NA",
+ 25800,
+ 26300,
+ 25700,
+ "NA"
+ ],
+ "Male": [
+ 26100,
+ 24400,
+ 25900,
+ 24700,
+ 25900,
+ 25000,
+ 24100
+ ],
+ "Female & Male": [
+ 25500,
+ 25400,
+ 26000,
+ 25800,
+ 25500,
+ 26500,
+ 24900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,200",
+ "x",
+ "x",
+ "£25,800",
+ "£26,300",
+ "£25,700",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,100",
+ "£24,400",
+ "£25,900",
+ "£24,700",
+ "£25,900",
+ "£25,000",
+ "£24,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£25,400",
+ "£26,000",
+ "£25,800",
+ "£25,500",
+ "£26,500",
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Reinsurance",
+ "Other financial service activities; except insurance and pension funding",
+ "Insurance",
+ "Trusts; funds and similar financial entities",
+ "Monetary intermediation",
+ "Activities auxiliary to insurance and pension funding",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Fund management activities",
+ "Pension funding"
+ ],
+ "Female": [
+ 25600,
+ 24500,
+ 24600,
+ "NA",
+ 24700,
+ 26000,
+ 24200,
+ 25200,
+ 26000
+ ],
+ "Male": [
+ "NA",
+ 25400,
+ 23900,
+ 24800,
+ 24800,
+ 25600,
+ 25200,
+ 24000,
+ 27100
+ ],
+ "Female & Male": [
+ 25100,
+ 25800,
+ 25000,
+ 26000,
+ 24300,
+ 24300,
+ 24800,
+ 24500,
+ 24200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,600",
+ "£24,500",
+ "£24,600",
+ "x",
+ "£24,700",
+ "£26,000",
+ "£24,200",
+ "£25,200",
+ "£26,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,400",
+ "£23,900",
+ "£24,800",
+ "£24,800",
+ "£25,600",
+ "£25,200",
+ "£24,000",
+ "£27,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£25,800",
+ "£25,000",
+ "£26,000",
+ "£24,300",
+ "£24,300",
+ "£24,800",
+ "£24,500",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Libraries; archives; museums and other cultural activities",
+ "Amusement and recreation activities",
+ "Sports activities",
+ "Gambling and betting activities",
+ "Creative; arts and entertainment activities"
+ ],
+ "Female": [
+ 24700,
+ 24600,
+ 26400,
+ 25100,
+ 25200
+ ],
+ "Male": [
+ 24100,
+ 24600,
+ 24700,
+ "NA",
+ 23400
+ ],
+ "Female & Male": [
+ 23300,
+ 24100,
+ 24200,
+ 24700,
+ 24000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£24,600",
+ "£26,400",
+ "£25,100",
+ "£25,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,100",
+ "£24,600",
+ "£24,700",
+ "x",
+ "£23,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,300",
+ "£24,100",
+ "£24,200",
+ "£24,700",
+ "£24,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Manufacture of gas; distribution of gaseous fuels through mains"
+ ],
+ "Female": [
+ 24700,
+ "NA"
+ ],
+ "Male": [
+ 24000,
+ 26000
+ ],
+ "Female & Male": [
+ 24700,
+ 25000
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£26,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£25,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Waste treatment and disposal",
+ "Water collection; treatment and supply",
+ "Materials recovery",
+ "Waste collection"
+ ],
+ "Female": [
+ 25700,
+ 24300,
+ "NA",
+ "NA"
+ ],
+ "Male": [
+ 23100,
+ 24300,
+ 25800,
+ 26200
+ ],
+ "Female & Male": [
+ 26400,
+ 24200,
+ 25500,
+ 23600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£24,300",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£23,100",
+ "£24,300",
+ "£25,800",
+ "£26,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400",
+ "£24,200",
+ "£25,500",
+ "£23,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Market research and public opinion polling",
+ "Technical testing and analysis",
+ "Veterinary activities",
+ "Activities of head offices",
+ "Advertising",
+ "Research and experimental development on natural sciences and engineering",
+ "Research and experimental development on social sciences and humanities",
+ "Management consultancy activities",
+ "Architectural and engineering activities and related technical consultancy",
+ "Legal activities",
+ "Specialised design activities",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Accounting; bookkeeping and auditing activities; tax consultancy"
+ ],
+ "Female": [
+ 25900,
+ 24300,
+ 25600,
+ 24900,
+ 24500,
+ 27300,
+ 23400,
+ 23700,
+ 25200,
+ 23900,
+ "NA",
+ 25200,
+ 25200
+ ],
+ "Male": [
+ 25200,
+ 24600,
+ 25400,
+ 26700,
+ 24500,
+ 26500,
+ 24900,
+ 25300,
+ 23000,
+ 25500,
+ 24900,
+ 25400,
+ 24800
+ ],
+ "Female & Male": [
+ 26300,
+ 26500,
+ 23800,
+ 25400,
+ 23900,
+ 25100,
+ 25600,
+ 25800,
+ 23600,
+ 25100,
+ 24500,
+ 26000,
+ 24700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,900",
+ "£24,300",
+ "£25,600",
+ "£24,900",
+ "£24,500",
+ "£27,300",
+ "£23,400",
+ "£23,700",
+ "£25,200",
+ "£23,900",
+ "x",
+ "£25,200",
+ "£25,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,200",
+ "£24,600",
+ "£25,400",
+ "£26,700",
+ "£24,500",
+ "£26,500",
+ "£24,900",
+ "£25,300",
+ "£23,000",
+ "£25,500",
+ "£24,900",
+ "£25,400",
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,300",
+ "£26,500",
+ "£23,800",
+ "£25,400",
+ "£23,900",
+ "£25,100",
+ "£25,600",
+ "£25,800",
+ "£23,600",
+ "£25,100",
+ "£24,500",
+ "£26,000",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Other residential care activities",
+ "Hospital activities",
+ "Medical and dental practice activities",
+ "Other human health activities",
+ "Residential nursing care activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Other social work activities without accommodation",
+ "Residential care activities for the elderly and disabled"
+ ],
+ "Female": [
+ 25500,
+ 23700,
+ 23200,
+ 24200,
+ 26200,
+ 26700,
+ 25700,
+ 25800,
+ 24000
+ ],
+ "Male": [
+ 24300,
+ 25500,
+ 26800,
+ 24400,
+ 23000,
+ 25600,
+ 24900,
+ 25300,
+ 24500
+ ],
+ "Female & Male": [
+ 24000,
+ 22000,
+ 24100,
+ 23600,
+ 24900,
+ 25800,
+ 26400,
+ 25700,
+ 24200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£23,700",
+ "£23,200",
+ "£24,200",
+ "£26,200",
+ "£26,700",
+ "£25,700",
+ "£25,800",
+ "£24,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "£25,500",
+ "£26,800",
+ "£24,400",
+ "£23,000",
+ "£25,600",
+ "£24,900",
+ "£25,300",
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,000",
+ "£22,000",
+ "£24,100",
+ "£23,600",
+ "£24,900",
+ "£25,800",
+ "£26,400",
+ "£25,700",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Libraries; archives; museums and other cultural activities"
+ ],
+ "Female": [
+ 24000
+ ],
+ "Male": [
+ 25100
+ ],
+ "Female & Male": [
+ 27100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£27,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Beverage serving activities",
+ "Event catering and other food service activities",
+ "Hotels and similar accommodation",
+ "Restaurants and mobile food service activities"
+ ],
+ "Female": [
+ 24800,
+ 23800,
+ 24500,
+ 25700
+ ],
+ "Male": [
+ 25500,
+ 24900,
+ 26200,
+ 27700
+ ],
+ "Female & Male": [
+ 24600,
+ 24800,
+ 24400,
+ 26200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,800",
+ "£23,800",
+ "£24,500",
+ "£25,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£24,900",
+ "£26,200",
+ "£27,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,600",
+ "£24,800",
+ "£24,400",
+ "£26,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Activities of trade unions",
+ "Repair of computers and communication equipment",
+ "Activities of business; employers and professional membership organisations",
+ "Other personal service activities",
+ "Activities of other membership organisations"
+ ],
+ "Female": [
+ 24300,
+ "NA",
+ 23800,
+ 25100,
+ 24700
+ ],
+ "Male": [
+ 25100,
+ 24800,
+ 26000,
+ 24900,
+ 25500
+ ],
+ "Female & Male": [
+ 24600,
+ 23600,
+ 25000,
+ 25300,
+ 26100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "x",
+ "£23,800",
+ "£25,100",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£24,800",
+ "£26,000",
+ "£24,900",
+ "£25,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,600",
+ "£23,600",
+ "£25,000",
+ "£25,300",
+ "£26,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of glass and glass products",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of consumer electronics",
+ "Manufacture of games and toys",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of communication equipment",
+ "Manufacture of plastics products",
+ "Manufacture of motor vehicles",
+ "Manufacture of parts and accessories for motor vehicles",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of other chemical products",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Manufacture of prepared animal feeds",
+ "Installation of industrial machinery and equipment",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of other special-purpose machinery",
+ "Manufacture of other food products",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of domestic appliances",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of computers and peripheral equipment",
+ "Manufacture of pesticides and other agrochemical products",
+ "Manufacture of agricultural and forestry machinery",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Manufacture of other electrical equipment",
+ "Printing and service activities related to printing",
+ "Forging; pressing; stamping and roll-forming of metal; powder metallurgy",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of other general-purpose machinery",
+ "Treatment and coating of metals; machining",
+ "Manufacture of irradiation; electromedical and electrotherapeutic equipment",
+ "Manufacture of beverages",
+ "Manufacture of electronic components and boards",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of wiring and wiring devices",
+ "Manufacture of metal forming machinery and machine tools",
+ "Manufacture of furniture",
+ "Manufacture of railway locomotives and rolling stock",
+ "Weaving of textiles",
+ "Manufacture of air and spacecraft and related machinery"
+ ],
+ "Female": [
+ "NA",
+ 25000,
+ "NA",
+ "NA",
+ 24400,
+ "NA",
+ 23100,
+ 25000,
+ "NA",
+ 25500,
+ 24900,
+ 24100,
+ 24900,
+ 25900,
+ "NA",
+ 27300,
+ "NA",
+ 24700,
+ "NA",
+ 25200,
+ 24700,
+ 23900,
+ "NA",
+ "NA",
+ "NA",
+ 24800,
+ "NA",
+ 24000,
+ 25800,
+ "NA",
+ "NA",
+ 25200,
+ 26200,
+ 25900,
+ 26200,
+ "NA",
+ "NA",
+ 26400,
+ "NA",
+ 24500,
+ "NA",
+ 25600,
+ 23800,
+ "NA",
+ "NA",
+ 23100
+ ],
+ "Male": [
+ 26300,
+ 24600,
+ 25100,
+ 25500,
+ 24900,
+ 23400,
+ 26100,
+ 25500,
+ 25200,
+ 23700,
+ 25300,
+ 24000,
+ 25000,
+ 24200,
+ 24100,
+ "NA",
+ 25600,
+ "NA",
+ 25000,
+ 25700,
+ 25200,
+ 25200,
+ 25600,
+ 27100,
+ 25000,
+ 25400,
+ 23300,
+ 26800,
+ 25000,
+ 23000,
+ 25100,
+ "NA",
+ "NA",
+ 26000,
+ 25000,
+ 24400,
+ 26700,
+ "NA",
+ 24900,
+ 25700,
+ 26100,
+ "NA",
+ 24200,
+ 24400,
+ 25400,
+ 26900
+ ],
+ "Female & Male": [
+ 24700,
+ 26100,
+ 24900,
+ 25200,
+ 27300,
+ 24900,
+ 23900,
+ 23900,
+ 25200,
+ 25300,
+ 24000,
+ 24400,
+ 27700,
+ 26100,
+ 24400,
+ 24200,
+ 24300,
+ 25200,
+ 24100,
+ 24000,
+ 25200,
+ 25900,
+ 24900,
+ 26800,
+ 26300,
+ 24700,
+ 24400,
+ 24200,
+ 25700,
+ 25000,
+ 24500,
+ 24800,
+ 23500,
+ 25900,
+ 23800,
+ 25700,
+ 25000,
+ 25000,
+ 25200,
+ 24400,
+ 24900,
+ 24200,
+ 25300,
+ 26300,
+ 23700,
+ 23200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,000",
+ "x",
+ "x",
+ "£24,400",
+ "x",
+ "£23,100",
+ "£25,000",
+ "x",
+ "£25,500",
+ "£24,900",
+ "£24,100",
+ "£24,900",
+ "£25,900",
+ "x",
+ "£27,300",
+ "x",
+ "£24,700",
+ "x",
+ "£25,200",
+ "£24,700",
+ "£23,900",
+ "x",
+ "x",
+ "x",
+ "£24,800",
+ "x",
+ "£24,000",
+ "£25,800",
+ "x",
+ "x",
+ "£25,200",
+ "£26,200",
+ "£25,900",
+ "£26,200",
+ "x",
+ "x",
+ "£26,400",
+ "x",
+ "£24,500",
+ "x",
+ "£25,600",
+ "£23,800",
+ "x",
+ "x",
+ "£23,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,300",
+ "£24,600",
+ "£25,100",
+ "£25,500",
+ "£24,900",
+ "£23,400",
+ "£26,100",
+ "£25,500",
+ "£25,200",
+ "£23,700",
+ "£25,300",
+ "£24,000",
+ "£25,000",
+ "£24,200",
+ "£24,100",
+ "x",
+ "£25,600",
+ "x",
+ "£25,000",
+ "£25,700",
+ "£25,200",
+ "£25,200",
+ "£25,600",
+ "£27,100",
+ "£25,000",
+ "£25,400",
+ "£23,300",
+ "£26,800",
+ "£25,000",
+ "£23,000",
+ "£25,100",
+ "x",
+ "x",
+ "£26,000",
+ "£25,000",
+ "£24,400",
+ "£26,700",
+ "x",
+ "£24,900",
+ "£25,700",
+ "£26,100",
+ "x",
+ "£24,200",
+ "£24,400",
+ "£25,400",
+ "£26,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£26,100",
+ "£24,900",
+ "£25,200",
+ "£27,300",
+ "£24,900",
+ "£23,900",
+ "£23,900",
+ "£25,200",
+ "£25,300",
+ "£24,000",
+ "£24,400",
+ "£27,700",
+ "£26,100",
+ "£24,400",
+ "£24,200",
+ "£24,300",
+ "£25,200",
+ "£24,100",
+ "£24,000",
+ "£25,200",
+ "£25,900",
+ "£24,900",
+ "£26,800",
+ "£26,300",
+ "£24,700",
+ "£24,400",
+ "£24,200",
+ "£25,700",
+ "£25,000",
+ "£24,500",
+ "£24,800",
+ "£23,500",
+ "£25,900",
+ "£23,800",
+ "£25,700",
+ "£25,000",
+ "£25,000",
+ "£25,200",
+ "£24,400",
+ "£24,900",
+ "£24,200",
+ "£25,300",
+ "£26,300",
+ "£23,700",
+ "£23,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "Female": [
+ 24800
+ ],
+ "Male": [
+ 24800
+ ],
+ "Female & Male": [
+ 24400
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Real estate activities on a fee or contract basis",
+ "Renting and operating of own or leased real estate"
+ ],
+ "Female": [
+ 25500,
+ 24200
+ ],
+ "Male": [
+ 25100,
+ 23600
+ ],
+ "Female & Male": [
+ 23700,
+ 24100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,500",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£23,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,700",
+ "£24,100"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "Female": [
+ 24500
+ ],
+ "Male": [
+ 24500
+ ],
+ "Female & Male": [
+ 24800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,000",
+ "£26,900",
+ "£24,300",
+ "£24,200",
+ "x",
+ "£25,200",
+ "£24,300",
+ "£24,000",
+ "£27,200",
+ "£24,700",
+ "£24,100",
+ "£25,900",
+ "£25,100",
+ "£27,100",
+ "£24,700",
+ "£25,700",
+ "£23,900",
+ "£24,200",
+ "£23,800",
+ "£26,100",
+ "£25,300"
+ ],
+ "footer": "22,745",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,500",
+ "£25,200",
+ "£25,000",
+ "£24,300",
+ "£23,600",
+ "£25,700",
+ "£27,300",
+ "£25,500",
+ "£22,600",
+ "£23,900",
+ "£24,100",
+ "£25,800",
+ "£24,700",
+ "£23,000",
+ "£26,500",
+ "£23,500",
+ "£26,200",
+ "£24,900",
+ "£23,600",
+ "£25,400",
+ "£23,400"
+ ],
+ "footer": "31,250",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,300",
+ "£24,300",
+ "£24,600",
+ "£24,900",
+ "£23,500",
+ "£24,000",
+ "£26,400",
+ "£26,400",
+ "£26,200",
+ "£24,800",
+ "£27,100",
+ "£23,400",
+ "£24,900",
+ "£25,700",
+ "£25,800",
+ "£24,800",
+ "£26,000",
+ "£26,900",
+ "£26,500",
+ "£23,800",
+ "£23,300"
+ ],
+ "footer": "21,300",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 27300\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For level 8 graduates of all subjects, 5 years after graduation, the industry with the highest proportion of female graduates is Public administration and defence - compulsory social security<\/b>, and the\n median earnings of females in this industry were £25,000<\/b>. The industry\n with the highest proportion of male graduates was Wholesale and retail trade - repair of motor vehicles and motorcycles<\/b> and the median earnings of males\n in this industry were £25,700<\/b>.
The biggest difference in proportions is seen in Wholesale and retail trade - repair of motor vehicles and motorcycles<\/b> where the proportion of male graduates is 10.7 percentage points higher<\/b> than the proportion of female graduates. The biggest difference in median earnings is seen in Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use<\/b> where the median earnings of male graduates were £23,600 higher<\/b> than the medain earnings of female graduates.The group with the highest earnings was male graduates in the Transportation and storage<\/b> industry\n (median earnings of £27,300<\/b>).0%<\/b> of female graduates are concentrated in the top 2\n industries (either Public administration and defence - compulsory social security<\/b> or Education<\/b>),\n whereas for male graduates this is 12.4%.
",
+ "crosstab_title": " Industry of graduate employment for graduates of all subjects by sex, five years after\n graduation, male and female level 8 graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_3.json b/tests/shinytest/testUI-current/subjectByIndustry_3.json
new file mode 100644
index 0000000..57ce07c
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_3.json
@@ -0,0 +1,1480 @@
+{
+ "input": {
+ "countinput2": "sex",
+ "crosstabs.subjectinput": "Allied health",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Manufacturing",
+ "Professional, scientific and technical activities",
+ "Public administration and defence - compulsory social security",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Administrative and support service activities",
+ "Other service activities",
+ "Financial and insurance activities",
+ "Human health and social work activities",
+ "Information and communication",
+ "Transportation and storage",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "Female": [
+ 24200,
+ 26000,
+ 24100,
+ 25500,
+ 23700,
+ 25300,
+ 23700,
+ 24600,
+ 25200,
+ 24200,
+ 25500,
+ 23400
+ ],
+ "Male": [
+ 25600,
+ 26400,
+ 24900,
+ 24400,
+ 25800,
+ 25900,
+ "NA",
+ 25100,
+ 24900,
+ 24900,
+ "NA",
+ 25000
+ ],
+ "Female & Male": [
+ 25400,
+ 24200,
+ 24600,
+ 26300,
+ 26400,
+ 25900,
+ 25600,
+ 24800,
+ 24000,
+ 24500,
+ 25200,
+ 25300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Secondary education",
+ "Higher education"
+ ],
+ "Female": [
+ 23400,
+ 25500
+ ],
+ "Male": [
+ "NA",
+ 24900
+ ],
+ "Female & Male": [
+ 26000,
+ 25300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,400",
+ "£25,500"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,000",
+ "£25,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of other chemical products"
+ ],
+ "Female": [
+ 24400,
+ "NA"
+ ],
+ "Male": [
+ 27000,
+ 25900
+ ],
+ "Female & Male": [
+ 24300,
+ 24300
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,400",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£27,000",
+ "£25,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,300",
+ "£24,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Research and experimental development on natural sciences and engineering",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Market research and public opinion polling",
+ "Legal activities",
+ "Management consultancy activities"
+ ],
+ "Female": [
+ 26600,
+ "NA",
+ 25500,
+ 25200,
+ "NA",
+ 24200
+ ],
+ "Male": [
+ 23700,
+ 25900,
+ 24000,
+ "NA",
+ 25200,
+ "NA"
+ ],
+ "Female & Male": [
+ 25700,
+ 24900,
+ 24100,
+ 24400,
+ 24600,
+ 24600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£26,600",
+ "x",
+ "£25,500",
+ "£25,200",
+ "x",
+ "£24,200"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£23,700",
+ "£25,900",
+ "£24,000",
+ "x",
+ "£25,200",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£24,900",
+ "£24,100",
+ "£24,400",
+ "£24,600",
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole"
+ ],
+ "Female": [
+ 25600,
+ 23600
+ ],
+ "Male": [
+ 25700,
+ 26600
+ ],
+ "Female & Male": [
+ 24900,
+ 24700
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,600",
+ "£23,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,700",
+ "£26,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900",
+ "£24,700"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail sale of other goods in specialised stores",
+ "Wholesale of household goods",
+ "Retail sale in non-specialised stores",
+ "Maintenance and repair of motor vehicles"
+ ],
+ "Female": [
+ "NA",
+ 23500,
+ 25600,
+ 25600
+ ],
+ "Male": [
+ 26100,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Female & Male": [
+ 26800,
+ 25600,
+ 25600,
+ 24900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,500",
+ "£25,600",
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£26,100",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,800",
+ "£25,600",
+ "£25,600",
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Temporary employment agency activities",
+ "Business support service activities n.e.c."
+ ],
+ "Female": [
+ 23500,
+ 22900
+ ],
+ "Male": [
+ "NA",
+ 26300
+ ],
+ "Female & Male": [
+ 25200,
+ 25800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,500",
+ "£22,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£25,200",
+ "£25,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities"
+ ],
+ "group_name": [
+ "Activities of other membership organisations"
+ ],
+ "Female": [
+ 26800
+ ],
+ "Male": [
+ "NA"
+ ],
+ "Female & Male": [
+ 26400
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£26,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Pension funding",
+ "Activities auxiliary to financial services; except insurance and pension funding"
+ ],
+ "Female": [
+ 25100,
+ "NA"
+ ],
+ "Male": [
+ "NA",
+ 23000
+ ],
+ "Female & Male": [
+ 24700,
+ 24800
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,000"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,700",
+ "£24,800"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Hospital activities",
+ "Medical and dental practice activities",
+ "Other residential care activities",
+ "Other human health activities",
+ "Other social work activities without accommodation"
+ ],
+ "Female": [
+ 23700,
+ 24600,
+ 24000,
+ 24500,
+ 23700,
+ 24900
+ ],
+ "Male": [
+ 25100,
+ 24500,
+ "NA",
+ 25900,
+ 24800,
+ 24400
+ ],
+ "Female & Male": [
+ 23400,
+ 24200,
+ 22400,
+ 24500,
+ 25500,
+ 25600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,700",
+ "£24,600",
+ "£24,000",
+ "£24,500",
+ "£23,700",
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,100",
+ "£24,500",
+ "x",
+ "£25,900",
+ "£24,800",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,400",
+ "£24,200",
+ "£22,400",
+ "£24,500",
+ "£25,500",
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication"
+ ],
+ "group_name": [
+ "Computer programming; consultancy and related activities"
+ ],
+ "Female": [
+ 23400
+ ],
+ "Male": [
+ 24900
+ ],
+ "Female & Male": [
+ 26600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£24,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£26,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Postal activities under universal service obligation"
+ ],
+ "Female": [
+ 23300
+ ],
+ "Male": [
+ "NA"
+ ],
+ "Female & Male": [
+ 23900
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£23,300"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£23,900"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "Female": [
+ 24600
+ ],
+ "Male": [
+ 25600
+ ],
+ "Female & Male": [
+ 24600
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "cell": [
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "cell": [
+ "£25,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "cell": [
+ "£24,600"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "Female",
+ "name": "Female",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,200",
+ "£26,000",
+ "£24,100",
+ "£25,500",
+ "£23,700",
+ "£25,300",
+ "£23,700",
+ "£24,600",
+ "£25,200",
+ "£24,200",
+ "£25,500",
+ "£23,400"
+ ],
+ "footer": "14,215",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Male",
+ "name": "Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,600",
+ "£26,400",
+ "£24,900",
+ "£24,400",
+ "£25,800",
+ "£25,900",
+ "x",
+ "£25,100",
+ "£24,900",
+ "£24,900",
+ "x",
+ "£25,000"
+ ],
+ "footer": "8,745",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Female & Male",
+ "name": "Female & Male",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,400",
+ "£24,200",
+ "£24,600",
+ "£26,300",
+ "£26,400",
+ "£25,900",
+ "£25,600",
+ "£24,800",
+ "£24,000",
+ "£24,500",
+ "£25,200",
+ "£25,300"
+ ],
+ "footer": "11,385",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Female & Male']\n var max = 26400\n var min = 23400\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For level 8 graduates of Allied health, 5 years after graduation, the industry with the highest proportion of female graduates is Public administration and defence - compulsory social security<\/b>, and the\n median earnings of females in this industry were £25,500<\/b>. The industry\n with the highest proportion of male graduates was Education<\/b> and the median earnings of males\n in this industry were £25,600<\/b>.
The biggest difference in proportions is seen in Public administration and defence - compulsory social security<\/b> where the proportion of female graduates is 19.1 percentage points higher<\/b> than the proportion of male graduates. The biggest difference in median earnings is seen in Transportation and storage<\/b> where the median earnings of female graduates were £25,500 higher<\/b> than the median earnings of male graduates.The group with the highest earnings was male graduates in the Manufacturing<\/b> industry\n (median earnings of £26,400<\/b>).5.9%<\/b> of female graduates are concentrated in the top 2\n industries (either Education<\/b> or Manufacturing<\/b>),\n whereas for male graduates this is 0%.
",
+ "crosstab_title": " Industry of graduate employment for graduates of Allied health by sex, five years after\n graduation, male and female level 8 graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_4.json b/tests/shinytest/testUI-current/subjectByIndustry_4.json
new file mode 100644
index 0000000..d44110c
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_4.json
@@ -0,0 +1,5420 @@
+{
+ "input": {
+ "countinput2": "ethnicity",
+ "crosstabs.subjectinput": "Allied health",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Agriculture, forestry and fishing",
+ "Arts, entertainment and recreation",
+ "Financial and insurance activities",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Administrative and support service activities",
+ "Accommodation and food service activities",
+ "Professional, scientific and technical activities",
+ "Information and communication",
+ "Education",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Other service activities",
+ "Construction",
+ "Human health and social work activities",
+ "Public administration and defence - compulsory social security",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Electricity, gas, steam and air conditioning supply",
+ "Real estate activities",
+ "Mining and quarrying",
+ "Manufacturing",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "White": [
+ 25400,
+ 24200,
+ 26700,
+ 23400,
+ 26300,
+ 23700,
+ 23600,
+ 25100,
+ 25000,
+ 25400,
+ 24100,
+ 27800,
+ 25500,
+ 26100,
+ 25500,
+ 24600,
+ 23300,
+ 23500,
+ 24100,
+ 23500,
+ 25400
+ ],
+ "Black": [
+ 27000,
+ "NA",
+ 26300,
+ 24100,
+ 24600,
+ 25500,
+ 24700,
+ 24700,
+ 25000,
+ 24700,
+ "NA",
+ 24800,
+ 23800,
+ 25600,
+ 25600,
+ 26100,
+ 24600,
+ 24600,
+ "NA",
+ 24700,
+ 25700
+ ],
+ "Asian": [
+ 25600,
+ "NA",
+ 25100,
+ 27200,
+ 26300,
+ 25900,
+ 24700,
+ 25500,
+ 24800,
+ 25300,
+ "NA",
+ 22600,
+ "NA",
+ 25500,
+ 24900,
+ 25100,
+ "NA",
+ 26400,
+ "NA",
+ 24800,
+ 25100
+ ],
+ "Mixed": [
+ 24900,
+ "NA",
+ 24500,
+ 23700,
+ "NA",
+ 23800,
+ 25400,
+ 24500,
+ 24900,
+ 24700,
+ "NA",
+ 24800,
+ 25000,
+ 24100,
+ 25100,
+ 25700,
+ "NA",
+ 25700,
+ "NA",
+ 24800,
+ 24900
+ ],
+ "Other": [
+ "NA",
+ 24000,
+ 26000,
+ "NA",
+ "NA",
+ 24000,
+ 25900,
+ 24100,
+ 23300,
+ 25100,
+ "NA",
+ "NA",
+ 24100,
+ 25900,
+ 25600,
+ 23700,
+ "NA",
+ "NA",
+ "NA",
+ 24200,
+ 25300
+ ],
+ "Not known": [
+ 24600,
+ "NA",
+ 26000,
+ 24900,
+ 24400,
+ 25500,
+ 27700,
+ 25600,
+ 24400,
+ 23100,
+ "NA",
+ 25100,
+ "NA",
+ 25300,
+ 24300,
+ 25600,
+ "NA",
+ 26300,
+ "NA",
+ 24600,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Passenger rail transport; interurban",
+ "Warehousing and storage",
+ "Freight transport by road and removal services",
+ "Support activities for transportation",
+ "Postal activities under universal service obligation",
+ "Passenger air transport",
+ "Other passenger land transport",
+ "Other postal and courier activities"
+ ],
+ "White": [
+ 24875,
+ 23967,
+ 26063,
+ 24445,
+ 23421,
+ 24363,
+ 24712,
+ 25698
+ ],
+ "Black": [
+ 26507,
+ "NA",
+ "NA",
+ 24892,
+ 26155,
+ "NA",
+ 24762,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ 24387,
+ 23402,
+ 26531,
+ 27607,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 25821,
+ "NA",
+ 22519,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ 23424,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,875",
+ "£23,967",
+ "£26,063",
+ "£24,445",
+ "£23,421",
+ "£24,363",
+ "£24,712",
+ "£25,698"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,507",
+ "x",
+ "x",
+ "£24,892",
+ "£26,155",
+ "x",
+ "£24,762",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,387",
+ "£23,402",
+ "£26,531",
+ "£27,607",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£25,821",
+ "x",
+ "£22,519",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£23,424",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of articles of fur",
+ "Not known",
+ "Manufacture of knitted and crocheted apparel"
+ ],
+ "White": [
+ 23283,
+ 24468,
+ 26336
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 24053,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,283",
+ "£24,468",
+ "£26,336"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,053",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Creative; arts and entertainment activities",
+ "Amusement and recreation activities",
+ "Sports activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Gambling and betting activities"
+ ],
+ "White": [
+ 26507,
+ 25058,
+ 25113,
+ 24500,
+ 24713
+ ],
+ "Black": [
+ "NA",
+ 25313,
+ 25636,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23425
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 23429,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 23952,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25941,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,507",
+ "£25,058",
+ "£25,113",
+ "£24,500",
+ "£24,713"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,313",
+ "£25,636",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,425"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,429",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,952",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,941",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Other financial service activities; except insurance and pension funding",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Activities auxiliary to insurance and pension funding",
+ "Activities of holding companies",
+ "Pension funding",
+ "Trusts; funds and similar financial entities",
+ "Insurance",
+ "Monetary intermediation",
+ "Reinsurance",
+ "Fund management activities"
+ ],
+ "White": [
+ 26749,
+ 23506,
+ 24361,
+ 25202,
+ 24636,
+ 26293,
+ 27140,
+ 24121,
+ 25006,
+ 25986
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 22937,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24063,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 25635,
+ 24079,
+ "NA",
+ 26230,
+ "NA",
+ 23780,
+ 25451,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 23807,
+ "NA",
+ 27603,
+ "NA",
+ 25855,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 26662,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23578
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,749",
+ "£23,506",
+ "£24,361",
+ "£25,202",
+ "£24,636",
+ "£26,293",
+ "£27,140",
+ "£24,121",
+ "£25,006",
+ "£25,986"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£22,937",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,063",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,635",
+ "£24,079",
+ "x",
+ "£26,230",
+ "x",
+ "£23,780",
+ "£25,451",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,807",
+ "x",
+ "£27,603",
+ "x",
+ "£25,855",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,662",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,578"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel",
+ "Undifferentiated goods-producing activities of private households for own use"
+ ],
+ "White": [
+ 25723,
+ "NA"
+ ],
+ "Black": [
+ "NA",
+ 24885
+ ],
+ "Asian": [
+ 24774,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 24866,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,723",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,885"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,774",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,866",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Organisation of conventions and trade shows",
+ "Security systems service activities",
+ "Renting and leasing of personal and household goods",
+ "Landscape service activities",
+ "Renting and leasing of motor vehicles",
+ "Private security activities",
+ "Activities of call centres",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Travel agency and tour operator activities",
+ "Other human resources provision",
+ "Combined facilities support activities",
+ "Cleaning activities",
+ "Activities of employment placement agencies",
+ "Temporary employment agency activities",
+ "Office administrative and support activities",
+ "Business support service activities n.e.c."
+ ],
+ "White": [
+ 24006,
+ "NA",
+ 23983,
+ 24450,
+ 23700,
+ 23491,
+ 24873,
+ 24267,
+ 25642,
+ 24667,
+ 24837,
+ 22556,
+ 24627,
+ 25029,
+ 24620,
+ 24999
+ ],
+ "Black": [
+ 22620,
+ "NA",
+ "NA",
+ "NA",
+ 24115,
+ 25286,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24477,
+ "NA",
+ 24733,
+ 26280,
+ 25179,
+ 24739
+ ],
+ "Asian": [
+ 26340,
+ "NA",
+ 24685,
+ "NA",
+ 27853,
+ 23414,
+ 24273,
+ "NA",
+ 26058,
+ 27148,
+ "NA",
+ 23632,
+ 24281,
+ 22525,
+ 23709,
+ 23999
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26057,
+ 23528,
+ "NA",
+ 24636
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24043,
+ "NA",
+ "NA",
+ 23933,
+ "NA",
+ "NA",
+ 24084,
+ 25414,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24148,
+ 24357,
+ "NA",
+ "NA",
+ "NA",
+ 26115,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25631,
+ 27481,
+ 24966,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,006",
+ "x",
+ "£23,983",
+ "£24,450",
+ "£23,700",
+ "£23,491",
+ "£24,873",
+ "£24,267",
+ "£25,642",
+ "£24,667",
+ "£24,837",
+ "£22,556",
+ "£24,627",
+ "£25,029",
+ "£24,620",
+ "£24,999"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£22,620",
+ "x",
+ "x",
+ "x",
+ "£24,115",
+ "£25,286",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,477",
+ "x",
+ "£24,733",
+ "£26,280",
+ "£25,179",
+ "£24,739"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,340",
+ "x",
+ "£24,685",
+ "x",
+ "£27,853",
+ "£23,414",
+ "£24,273",
+ "x",
+ "£26,058",
+ "£27,148",
+ "x",
+ "£23,632",
+ "£24,281",
+ "£22,525",
+ "£23,709",
+ "£23,999"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,057",
+ "£23,528",
+ "x",
+ "£24,636"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,043",
+ "x",
+ "x",
+ "£23,933",
+ "x",
+ "x",
+ "£24,084",
+ "£25,414",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,148",
+ "£24,357",
+ "x",
+ "x",
+ "x",
+ "£26,115",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,631",
+ "£27,481",
+ "£24,966",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Restaurants and mobile food service activities",
+ "Holiday and other short-stay accommodation",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Other accommodation",
+ "Hotels and similar accommodation",
+ "Beverage serving activities",
+ "Event catering and other food service activities"
+ ],
+ "White": [
+ 25513,
+ 25481,
+ 22307,
+ 25468,
+ 26104,
+ 24796,
+ 24130
+ ],
+ "Black": [
+ "NA",
+ 24052,
+ "NA",
+ "NA",
+ 25522,
+ "NA",
+ 24400
+ ],
+ "Asian": [
+ 24337,
+ "NA",
+ "NA",
+ 25008,
+ 25348,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25212,
+ 25849
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25842,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 22708
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,513",
+ "£25,481",
+ "£22,307",
+ "£25,468",
+ "£26,104",
+ "£24,796",
+ "£24,130"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,052",
+ "x",
+ "x",
+ "£25,522",
+ "x",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,337",
+ "x",
+ "x",
+ "£25,008",
+ "£25,348",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,212",
+ "£25,849"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,842",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£22,708"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Veterinary activities",
+ "Architectural and engineering activities and related technical consultancy",
+ "Market research and public opinion polling",
+ "Advertising",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Legal activities",
+ "Management consultancy activities",
+ "Research and experimental development on social sciences and humanities",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Activities of head offices",
+ "Research and experimental development on natural sciences and engineering",
+ "Technical testing and analysis",
+ "Translation and interpretation activities"
+ ],
+ "White": [
+ 24536,
+ 23982,
+ 25523,
+ 26313,
+ 25370,
+ 24942,
+ 25387,
+ 24598,
+ 26174,
+ 25630,
+ 23223,
+ 25807,
+ 26890
+ ],
+ "Black": [
+ "NA",
+ 24214,
+ 25566,
+ "NA",
+ 26155,
+ 24314,
+ 25404,
+ "NA",
+ "NA",
+ 25732,
+ 26148,
+ 25092,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 25140,
+ 24465,
+ 25894,
+ 24143,
+ 25073,
+ 24018,
+ 24061,
+ 26312,
+ 25284,
+ 23046,
+ 22814,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 25694,
+ 26404,
+ "NA",
+ 25706,
+ "NA",
+ 25740,
+ 23677,
+ 26409,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25356,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23787,
+ 26737,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24972,
+ "NA",
+ 25469,
+ "NA",
+ "NA",
+ "NA",
+ 25975,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,536",
+ "£23,982",
+ "£25,523",
+ "£26,313",
+ "£25,370",
+ "£24,942",
+ "£25,387",
+ "£24,598",
+ "£26,174",
+ "£25,630",
+ "£23,223",
+ "£25,807",
+ "£26,890"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,214",
+ "£25,566",
+ "x",
+ "£26,155",
+ "£24,314",
+ "£25,404",
+ "x",
+ "x",
+ "£25,732",
+ "£26,148",
+ "£25,092",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,140",
+ "£24,465",
+ "£25,894",
+ "£24,143",
+ "£25,073",
+ "£24,018",
+ "£24,061",
+ "£26,312",
+ "£25,284",
+ "£23,046",
+ "£22,814",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£25,694",
+ "£26,404",
+ "x",
+ "£25,706",
+ "x",
+ "£25,740",
+ "£23,677",
+ "£26,409",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,356",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,787",
+ "£26,737",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,972",
+ "x",
+ "£25,469",
+ "x",
+ "x",
+ "x",
+ "£25,975",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Software publishing",
+ "Computer programming; consultancy and related activities",
+ "Other information service activities",
+ "Motion picture; video and television programme activities",
+ "Publishing of books; periodicals and other publishing activities",
+ "Other telecommunications activities",
+ "Data processing; hosting and related activities; web portals",
+ "Satellite telecommunications activities",
+ "Television programming and broadcasting activities",
+ "Wireless telecommunications activities"
+ ],
+ "White": [
+ "NA",
+ 24675,
+ 25369,
+ 24565,
+ 27302,
+ 24772,
+ 24844,
+ 23930,
+ 23810,
+ 24168
+ ],
+ "Black": [
+ "NA",
+ 23373,
+ "NA",
+ "NA",
+ 24989,
+ "NA",
+ 27032,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 25334,
+ 27678,
+ "NA",
+ 24951,
+ 26984,
+ 23860,
+ 26099,
+ 24399,
+ "NA",
+ 25354
+ ],
+ "Mixed": [
+ "NA",
+ 24491,
+ "NA",
+ "NA",
+ "NA",
+ 25156,
+ "NA",
+ "NA",
+ 23724,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 25412,
+ 25932,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24301,
+ "NA",
+ 25439,
+ 26821,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,675",
+ "£25,369",
+ "£24,565",
+ "£27,302",
+ "£24,772",
+ "£24,844",
+ "£23,930",
+ "£23,810",
+ "£24,168"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,373",
+ "x",
+ "x",
+ "£24,989",
+ "x",
+ "£27,032",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,334",
+ "£27,678",
+ "x",
+ "£24,951",
+ "£26,984",
+ "£23,860",
+ "£26,099",
+ "£24,399",
+ "x",
+ "£25,354"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,491",
+ "x",
+ "x",
+ "x",
+ "£25,156",
+ "x",
+ "x",
+ "£23,724",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,412",
+ "£25,932",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,301",
+ "x",
+ "£25,439",
+ "£26,821",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Higher education",
+ "Secondary education",
+ "Other education",
+ "Pre-primary education",
+ "Primary education",
+ "Educational support activities"
+ ],
+ "White": [
+ 24956,
+ 25531,
+ 23881,
+ 26400,
+ 25146,
+ 25273
+ ],
+ "Black": [
+ 24144,
+ 25798,
+ 24715,
+ 23733,
+ 24166,
+ 24475
+ ],
+ "Asian": [
+ 24338,
+ 25987,
+ 24837,
+ 25635,
+ 24581,
+ "NA"
+ ],
+ "Mixed": [
+ 24706,
+ 26510,
+ 23031,
+ "NA",
+ 25340,
+ "NA"
+ ],
+ "Other": [
+ 23884,
+ 24363,
+ 24463,
+ "NA",
+ 27873,
+ "NA"
+ ],
+ "Not known": [
+ 24015,
+ 25082,
+ 24438,
+ "NA",
+ 25695,
+ 25713
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,956",
+ "£25,531",
+ "£23,881",
+ "£26,400",
+ "£25,146",
+ "£25,273"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,144",
+ "£25,798",
+ "£24,715",
+ "£23,733",
+ "£24,166",
+ "£24,475"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,338",
+ "£25,987",
+ "£24,837",
+ "£25,635",
+ "£24,581",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,706",
+ "£26,510",
+ "£23,031",
+ "x",
+ "£25,340",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,884",
+ "£24,363",
+ "£24,463",
+ "x",
+ "£27,873",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,015",
+ "£25,082",
+ "£24,438",
+ "x",
+ "£25,695",
+ "£25,713"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Remediation activities and other waste management services",
+ "Waste collection",
+ "Materials recovery",
+ "Water collection; treatment and supply",
+ "Sewerage"
+ ],
+ "White": [
+ 24838,
+ 26275,
+ 25255,
+ 24543,
+ 25082
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,838",
+ "£26,275",
+ "£25,255",
+ "£24,543",
+ "£25,082"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Other personal service activities",
+ "Repair of computers and communication equipment",
+ "Activities of other membership organisations",
+ "Repair of personal and household goods",
+ "Activities of business; employers and professional membership organisations"
+ ],
+ "White": [
+ 26875,
+ 24382,
+ 26417,
+ 24288,
+ 25264
+ ],
+ "Black": [
+ 26037,
+ "NA",
+ 24864,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 24948,
+ "NA",
+ 24427,
+ "NA",
+ 25212
+ ],
+ "Mixed": [
+ 25761,
+ 25584,
+ 25019,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25097,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,875",
+ "£24,382",
+ "£26,417",
+ "£24,288",
+ "£25,264"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,037",
+ "x",
+ "£24,864",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,948",
+ "x",
+ "£24,427",
+ "x",
+ "£25,212"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,761",
+ "£25,584",
+ "£25,019",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,097",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Development of building projects",
+ "Electrical; plumbing and other construction installation activities",
+ "Building completion and finishing",
+ "Construction of residential and non-residential buildings",
+ "Other specialised construction activities",
+ "Construction of other civil engineering projects"
+ ],
+ "White": [
+ 25899,
+ 25175,
+ 24823,
+ 23674,
+ 24626,
+ 25387
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 24994,
+ 24683,
+ "NA",
+ 26208
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 24617,
+ "NA",
+ 25473
+ ],
+ "Other": [
+ 24534,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,899",
+ "£25,175",
+ "£24,823",
+ "£23,674",
+ "£24,626",
+ "£25,387"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,994",
+ "£24,683",
+ "x",
+ "£26,208"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,617",
+ "x",
+ "£25,473"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,534",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Other human health activities",
+ "Residential care activities for the elderly and disabled",
+ "Other residential care activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Other social work activities without accommodation",
+ "Hospital activities",
+ "Residential nursing care activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Medical and dental practice activities"
+ ],
+ "White": [
+ 25573,
+ 25761,
+ 24633,
+ 25301,
+ 25168,
+ 25072,
+ 26882,
+ 23621,
+ 23411
+ ],
+ "Black": [
+ 24954,
+ 24815,
+ 24378,
+ 26338,
+ 24189,
+ 23402,
+ 25759,
+ 24228,
+ 23461
+ ],
+ "Asian": [
+ 25838,
+ 23252,
+ 24613,
+ 24184,
+ 26455,
+ 21797,
+ 24247,
+ 24360,
+ 26066
+ ],
+ "Mixed": [
+ 26303,
+ "NA",
+ 25342,
+ "NA",
+ 23757,
+ 24363,
+ 24022,
+ 24290,
+ 26330
+ ],
+ "Other": [
+ 23541,
+ "NA",
+ "NA",
+ "NA",
+ 23621,
+ 25026,
+ "NA",
+ "NA",
+ 23449
+ ],
+ "Not known": [
+ 25796,
+ "NA",
+ 24397,
+ "NA",
+ 26480,
+ 25042,
+ 24127,
+ 23699,
+ 25488
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,573",
+ "£25,761",
+ "£24,633",
+ "£25,301",
+ "£25,168",
+ "£25,072",
+ "£26,882",
+ "£23,621",
+ "£23,411"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,954",
+ "£24,815",
+ "£24,378",
+ "£26,338",
+ "£24,189",
+ "£23,402",
+ "£25,759",
+ "£24,228",
+ "£23,461"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,838",
+ "£23,252",
+ "£24,613",
+ "£24,184",
+ "£26,455",
+ "£21,797",
+ "£24,247",
+ "£24,360",
+ "£26,066"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,303",
+ "x",
+ "£25,342",
+ "x",
+ "£23,757",
+ "£24,363",
+ "£24,022",
+ "£24,290",
+ "£26,330"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,541",
+ "x",
+ "x",
+ "x",
+ "£23,621",
+ "£25,026",
+ "x",
+ "x",
+ "£23,449"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,796",
+ "x",
+ "£24,397",
+ "x",
+ "£26,480",
+ "£25,042",
+ "£24,127",
+ "£23,699",
+ "£25,488"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Provision of services to the community as a whole",
+ "Administration of the State and the economic and social policy of the community",
+ "Compulsory social security activities"
+ ],
+ "White": [
+ 24598,
+ 23538,
+ 26190
+ ],
+ "Black": [
+ 26853,
+ 25092,
+ 24714
+ ],
+ "Asian": [
+ "NA",
+ 25455,
+ 24648
+ ],
+ "Mixed": [
+ 26146,
+ 24814,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 25152,
+ "NA"
+ ],
+ "Not known": [
+ 24228,
+ 26146,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,598",
+ "£23,538",
+ "£26,190"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,853",
+ "£25,092",
+ "£24,714"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,455",
+ "£24,648"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,146",
+ "£24,814",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,152",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,228",
+ "£26,146",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail trade not in stores; stalls or markets",
+ "Wholesale of information and communication equipment",
+ "Retail sale of automotive fuel in specialised stores",
+ "Wholesale of household goods",
+ "Retail sale via stalls and markets",
+ "Non-specialised wholesale trade",
+ "Maintenance and repair of motor vehicles",
+ "Sale of motor vehicles",
+ "Retail sale of other household equipment in specialised stores",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Other specialised wholesale",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Retail sale in non-specialised stores",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Retail sale of other goods in specialised stores",
+ "Sale of motor vehicle parts and accessories",
+ "Wholesale of food; beverages and tobacco",
+ "Wholesale on a fee or contract basis",
+ "Wholesale of other machinery; equipment and supplies"
+ ],
+ "White": [
+ 25717,
+ 26223,
+ 24402,
+ 24833,
+ 25018,
+ 23852,
+ 25686,
+ 25575,
+ 23642,
+ 24405,
+ 24038,
+ 24776,
+ 23128,
+ 24248,
+ 22197,
+ 24407,
+ 24801,
+ 23409,
+ 25092
+ ],
+ "Black": [
+ 24732,
+ 25390,
+ "NA",
+ 24136,
+ "NA",
+ 25384,
+ "NA",
+ "NA",
+ 26068,
+ 25519,
+ "NA",
+ 25208,
+ 26919,
+ "NA",
+ 24635,
+ 26892,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 26184,
+ "NA",
+ "NA",
+ 23005,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24280,
+ 25036,
+ 25043,
+ 24982,
+ 26311,
+ "NA",
+ 24546,
+ "NA",
+ "NA",
+ "NA",
+ 23653
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 24168,
+ "NA",
+ 26270,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24372,
+ "NA",
+ 23383,
+ "NA",
+ 25223,
+ "NA",
+ 26634,
+ "NA",
+ 27050
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 23293,
+ 24431,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23797,
+ "NA",
+ 25007,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25768,
+ "NA",
+ "NA",
+ 25619,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26074,
+ "NA",
+ 26014,
+ "NA",
+ 23262,
+ "NA",
+ 24836,
+ "NA",
+ "NA",
+ "NA",
+ 25305
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,717",
+ "£26,223",
+ "£24,402",
+ "£24,833",
+ "£25,018",
+ "£23,852",
+ "£25,686",
+ "£25,575",
+ "£23,642",
+ "£24,405",
+ "£24,038",
+ "£24,776",
+ "£23,128",
+ "£24,248",
+ "£22,197",
+ "£24,407",
+ "£24,801",
+ "£23,409",
+ "£25,092"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,732",
+ "£25,390",
+ "x",
+ "£24,136",
+ "x",
+ "£25,384",
+ "x",
+ "x",
+ "£26,068",
+ "£25,519",
+ "x",
+ "£25,208",
+ "£26,919",
+ "x",
+ "£24,635",
+ "£26,892",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,184",
+ "x",
+ "x",
+ "£23,005",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,280",
+ "£25,036",
+ "£25,043",
+ "£24,982",
+ "£26,311",
+ "x",
+ "£24,546",
+ "x",
+ "x",
+ "x",
+ "£23,653"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,168",
+ "x",
+ "£26,270",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,372",
+ "x",
+ "£23,383",
+ "x",
+ "£25,223",
+ "x",
+ "£26,634",
+ "x",
+ "£27,050"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,293",
+ "£24,431",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,797",
+ "x",
+ "£25,007",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,768",
+ "x",
+ "x",
+ "£25,619",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,074",
+ "x",
+ "£26,014",
+ "x",
+ "£23,262",
+ "x",
+ "£24,836",
+ "x",
+ "x",
+ "x",
+ "£25,305"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution"
+ ],
+ "White": [
+ 22448
+ ],
+ "Black": [
+ 25292
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£22,448"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,292"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Renting and operating of own or leased real estate",
+ "Buying and selling of own real estate",
+ "Real estate activities on a fee or contract basis"
+ ],
+ "White": [
+ 25025,
+ 24215,
+ 24383
+ ],
+ "Black": [
+ 23750,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 26163,
+ "NA",
+ 25838
+ ],
+ "Mixed": [
+ 25450,
+ "NA",
+ 23492
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25125
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,025",
+ "£24,215",
+ "£24,383"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,750",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,163",
+ "x",
+ "£25,838"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,450",
+ "x",
+ "£23,492"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,125"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Combined facilities support activities"
+ ],
+ "White": [
+ 25211
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,211"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of cutlery; tools and general hardware",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of games and toys",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of beverages",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Printing and service activities related to printing",
+ "Manufacture of structural metal products",
+ "Manufacture of sports goods",
+ "Manufacture of plastics products",
+ "Manufacture of other chemical products",
+ "Manufacture of other special-purpose machinery",
+ "Manufacture of domestic appliances",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacturing n.e.c.",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of prepared animal feeds",
+ "Installation of industrial machinery and equipment",
+ "Manufacture of dairy products",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of motor vehicles",
+ "Manufacture of other food products",
+ "Building of ships and boats",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Manufacture of pharmaceutical preparations"
+ ],
+ "White": [
+ 23290,
+ 25525,
+ 25707,
+ 25329,
+ 25441,
+ 26933,
+ 25512,
+ 26342,
+ "NA",
+ 26072,
+ 26863,
+ 23388,
+ 25105,
+ 24057,
+ 26442,
+ 25861,
+ 25606,
+ 23668,
+ 23882,
+ 24789,
+ 24909,
+ 24090,
+ 25363,
+ 27042,
+ 25098,
+ 25113,
+ 24603,
+ 26452,
+ 24921,
+ 25300,
+ 24373,
+ "NA",
+ 24095,
+ 24950,
+ 26637,
+ 26294,
+ 25012,
+ 24985,
+ 25250,
+ 26243
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24519,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24681,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24007
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24371,
+ "NA",
+ 26944,
+ "NA",
+ "NA",
+ 24450,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23275,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26120,
+ "NA",
+ 24114,
+ 23835,
+ "NA",
+ 26640,
+ "NA",
+ 25006,
+ "NA",
+ 24375,
+ 23743
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26017,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26218,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25378,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25680,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26185,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25529,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,290",
+ "£25,525",
+ "£25,707",
+ "£25,329",
+ "£25,441",
+ "£26,933",
+ "£25,512",
+ "£26,342",
+ "x",
+ "£26,072",
+ "£26,863",
+ "£23,388",
+ "£25,105",
+ "£24,057",
+ "£26,442",
+ "£25,861",
+ "£25,606",
+ "£23,668",
+ "£23,882",
+ "£24,789",
+ "£24,909",
+ "£24,090",
+ "£25,363",
+ "£27,042",
+ "£25,098",
+ "£25,113",
+ "£24,603",
+ "£26,452",
+ "£24,921",
+ "£25,300",
+ "£24,373",
+ "x",
+ "£24,095",
+ "£24,950",
+ "£26,637",
+ "£26,294",
+ "£25,012",
+ "£24,985",
+ "£25,250",
+ "£26,243"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,519",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,681",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,007"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,371",
+ "x",
+ "£26,944",
+ "x",
+ "x",
+ "£24,450",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,275",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,120",
+ "x",
+ "£24,114",
+ "£23,835",
+ "x",
+ "£26,640",
+ "x",
+ "£25,006",
+ "x",
+ "£24,375",
+ "£23,743"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,017",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,218",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,378",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,680",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,185",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,529",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 23788
+ ],
+ "Black": [
+ 23831
+ ],
+ "Asian": [
+ 26264
+ ],
+ "Mixed": [
+ 23729
+ ],
+ "Other": [
+ 24123
+ ],
+ "Not known": [
+ 26661
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,788"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,831"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,264"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£23,729"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,123"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£26,661"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,400",
+ "£24,200",
+ "£26,700",
+ "£23,400",
+ "£26,300",
+ "£23,700",
+ "£23,600",
+ "£25,100",
+ "£25,000",
+ "£25,400",
+ "£24,100",
+ "£27,800",
+ "£25,500",
+ "£26,100",
+ "£25,500",
+ "£24,600",
+ "£23,300",
+ "£23,500",
+ "£24,100",
+ "£23,500",
+ "£25,400"
+ ],
+ "footer": "21,905",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£27,000",
+ "x",
+ "£26,300",
+ "£24,100",
+ "£24,600",
+ "£25,500",
+ "£24,700",
+ "£24,700",
+ "£25,000",
+ "£24,700",
+ "x",
+ "£24,800",
+ "£23,800",
+ "£25,600",
+ "£25,600",
+ "£26,100",
+ "£24,600",
+ "£24,600",
+ "x",
+ "£24,700",
+ "£25,700"
+ ],
+ "footer": "22,520",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,600",
+ "x",
+ "£25,100",
+ "£27,200",
+ "£26,300",
+ "£25,900",
+ "£24,700",
+ "£25,500",
+ "£24,800",
+ "£25,300",
+ "x",
+ "£22,600",
+ "x",
+ "£25,500",
+ "£24,900",
+ "£25,100",
+ "x",
+ "£26,400",
+ "x",
+ "£24,800",
+ "£25,100"
+ ],
+ "footer": "15,285",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,900",
+ "x",
+ "£24,500",
+ "£23,700",
+ "x",
+ "£23,800",
+ "£25,400",
+ "£24,500",
+ "£24,900",
+ "£24,700",
+ "x",
+ "£24,800",
+ "£25,000",
+ "£24,100",
+ "£25,100",
+ "£25,700",
+ "x",
+ "£25,700",
+ "x",
+ "£24,800",
+ "£24,900"
+ ],
+ "footer": "16,310",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£24,000",
+ "£26,000",
+ "x",
+ "x",
+ "£24,000",
+ "£25,900",
+ "£24,100",
+ "£23,300",
+ "£25,100",
+ "x",
+ "x",
+ "£24,100",
+ "£25,900",
+ "£25,600",
+ "£23,700",
+ "x",
+ "x",
+ "x",
+ "£24,200",
+ "£25,300"
+ ],
+ "footer": "11,955",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,600",
+ "x",
+ "£26,000",
+ "£24,900",
+ "£24,400",
+ "£25,500",
+ "£27,700",
+ "£25,600",
+ "£24,400",
+ "£23,100",
+ "x",
+ "£25,100",
+ "x",
+ "£25,300",
+ "£24,300",
+ "£25,600",
+ "x",
+ "£26,300",
+ "x",
+ "£24,600",
+ "£25,100"
+ ],
+ "footer": "18,265",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style",
+ "tag.attribs.columns.6.style",
+ "tag.attribs.columns.7.style",
+ "tag.attribs.columns.8.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of Allied health, 5 years after graduation, Accommodation and food service activities <\/b> was the most common industry for and White ethnicity graduates,\n Transportation and storage <\/b> was the most common industry for and Black ethnicity graduates, Education <\/b> was the most common industry for and Asian ethnicity graduates, Administrative and support service activities <\/b> was the most common industry for Mixed and Other ethnicity graduates, and Financial and insurance activities <\/b> was the most common industry for and Not known ethnicity graduates.
The industry with the largest range in proportions was Administrative and support service activities<\/b>\n where Other ethnicity graduates had the highest proportion and Asian\n ethnicity graduates had the lowest proportion.The industry with the largest range in median earnings was Other service activities<\/b>\n where White ethnicity graduates the highest median earnings (£27,800<\/b>) and Asian ethnicity graduates had the lowest median earnings (£22,600<\/b>).The group with the highest median earnings was White<\/b> ethnicity graduates in\n the Other service activities<\/b> industry (median earnings of £27,800<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of Allied health by ethnicity, five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_5.json b/tests/shinytest/testUI-current/subjectByIndustry_5.json
new file mode 100644
index 0000000..d44110c
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_5.json
@@ -0,0 +1,5420 @@
+{
+ "input": {
+ "countinput2": "ethnicity",
+ "crosstabs.subjectinput": "Allied health",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "5"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Agriculture, forestry and fishing",
+ "Arts, entertainment and recreation",
+ "Financial and insurance activities",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Administrative and support service activities",
+ "Accommodation and food service activities",
+ "Professional, scientific and technical activities",
+ "Information and communication",
+ "Education",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Other service activities",
+ "Construction",
+ "Human health and social work activities",
+ "Public administration and defence - compulsory social security",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Electricity, gas, steam and air conditioning supply",
+ "Real estate activities",
+ "Mining and quarrying",
+ "Manufacturing",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "White": [
+ 25400,
+ 24200,
+ 26700,
+ 23400,
+ 26300,
+ 23700,
+ 23600,
+ 25100,
+ 25000,
+ 25400,
+ 24100,
+ 27800,
+ 25500,
+ 26100,
+ 25500,
+ 24600,
+ 23300,
+ 23500,
+ 24100,
+ 23500,
+ 25400
+ ],
+ "Black": [
+ 27000,
+ "NA",
+ 26300,
+ 24100,
+ 24600,
+ 25500,
+ 24700,
+ 24700,
+ 25000,
+ 24700,
+ "NA",
+ 24800,
+ 23800,
+ 25600,
+ 25600,
+ 26100,
+ 24600,
+ 24600,
+ "NA",
+ 24700,
+ 25700
+ ],
+ "Asian": [
+ 25600,
+ "NA",
+ 25100,
+ 27200,
+ 26300,
+ 25900,
+ 24700,
+ 25500,
+ 24800,
+ 25300,
+ "NA",
+ 22600,
+ "NA",
+ 25500,
+ 24900,
+ 25100,
+ "NA",
+ 26400,
+ "NA",
+ 24800,
+ 25100
+ ],
+ "Mixed": [
+ 24900,
+ "NA",
+ 24500,
+ 23700,
+ "NA",
+ 23800,
+ 25400,
+ 24500,
+ 24900,
+ 24700,
+ "NA",
+ 24800,
+ 25000,
+ 24100,
+ 25100,
+ 25700,
+ "NA",
+ 25700,
+ "NA",
+ 24800,
+ 24900
+ ],
+ "Other": [
+ "NA",
+ 24000,
+ 26000,
+ "NA",
+ "NA",
+ 24000,
+ 25900,
+ 24100,
+ 23300,
+ 25100,
+ "NA",
+ "NA",
+ 24100,
+ 25900,
+ 25600,
+ 23700,
+ "NA",
+ "NA",
+ "NA",
+ 24200,
+ 25300
+ ],
+ "Not known": [
+ 24600,
+ "NA",
+ 26000,
+ 24900,
+ 24400,
+ 25500,
+ 27700,
+ 25600,
+ 24400,
+ 23100,
+ "NA",
+ 25100,
+ "NA",
+ 25300,
+ 24300,
+ 25600,
+ "NA",
+ 26300,
+ "NA",
+ 24600,
+ 25100
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Passenger rail transport; interurban",
+ "Warehousing and storage",
+ "Freight transport by road and removal services",
+ "Support activities for transportation",
+ "Postal activities under universal service obligation",
+ "Passenger air transport",
+ "Other passenger land transport",
+ "Other postal and courier activities"
+ ],
+ "White": [
+ 24875,
+ 23967,
+ 26063,
+ 24445,
+ 23421,
+ 24363,
+ 24712,
+ 25698
+ ],
+ "Black": [
+ 26507,
+ "NA",
+ "NA",
+ 24892,
+ 26155,
+ "NA",
+ 24762,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ 24387,
+ 23402,
+ 26531,
+ 27607,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 25821,
+ "NA",
+ 22519,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ 23424,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,875",
+ "£23,967",
+ "£26,063",
+ "£24,445",
+ "£23,421",
+ "£24,363",
+ "£24,712",
+ "£25,698"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,507",
+ "x",
+ "x",
+ "£24,892",
+ "£26,155",
+ "x",
+ "£24,762",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,387",
+ "£23,402",
+ "£26,531",
+ "£27,607",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£25,821",
+ "x",
+ "£22,519",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£23,424",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of articles of fur",
+ "Not known",
+ "Manufacture of knitted and crocheted apparel"
+ ],
+ "White": [
+ 23283,
+ 24468,
+ 26336
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 24053,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,283",
+ "£24,468",
+ "£26,336"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,053",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Creative; arts and entertainment activities",
+ "Amusement and recreation activities",
+ "Sports activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Gambling and betting activities"
+ ],
+ "White": [
+ 26507,
+ 25058,
+ 25113,
+ 24500,
+ 24713
+ ],
+ "Black": [
+ "NA",
+ 25313,
+ 25636,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23425
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 23429,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 23952,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25941,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,507",
+ "£25,058",
+ "£25,113",
+ "£24,500",
+ "£24,713"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,313",
+ "£25,636",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,425"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,429",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,952",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,941",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Other financial service activities; except insurance and pension funding",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Activities auxiliary to insurance and pension funding",
+ "Activities of holding companies",
+ "Pension funding",
+ "Trusts; funds and similar financial entities",
+ "Insurance",
+ "Monetary intermediation",
+ "Reinsurance",
+ "Fund management activities"
+ ],
+ "White": [
+ 26749,
+ 23506,
+ 24361,
+ 25202,
+ 24636,
+ 26293,
+ 27140,
+ 24121,
+ 25006,
+ 25986
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 22937,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24063,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 25635,
+ 24079,
+ "NA",
+ 26230,
+ "NA",
+ 23780,
+ 25451,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 23807,
+ "NA",
+ 27603,
+ "NA",
+ 25855,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 26662,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23578
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,749",
+ "£23,506",
+ "£24,361",
+ "£25,202",
+ "£24,636",
+ "£26,293",
+ "£27,140",
+ "£24,121",
+ "£25,006",
+ "£25,986"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£22,937",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,063",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,635",
+ "£24,079",
+ "x",
+ "£26,230",
+ "x",
+ "£23,780",
+ "£25,451",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,807",
+ "x",
+ "£27,603",
+ "x",
+ "£25,855",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,662",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,578"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel",
+ "Undifferentiated goods-producing activities of private households for own use"
+ ],
+ "White": [
+ 25723,
+ "NA"
+ ],
+ "Black": [
+ "NA",
+ 24885
+ ],
+ "Asian": [
+ 24774,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 24866,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,723",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,885"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,774",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,866",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Organisation of conventions and trade shows",
+ "Security systems service activities",
+ "Renting and leasing of personal and household goods",
+ "Landscape service activities",
+ "Renting and leasing of motor vehicles",
+ "Private security activities",
+ "Activities of call centres",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Travel agency and tour operator activities",
+ "Other human resources provision",
+ "Combined facilities support activities",
+ "Cleaning activities",
+ "Activities of employment placement agencies",
+ "Temporary employment agency activities",
+ "Office administrative and support activities",
+ "Business support service activities n.e.c."
+ ],
+ "White": [
+ 24006,
+ "NA",
+ 23983,
+ 24450,
+ 23700,
+ 23491,
+ 24873,
+ 24267,
+ 25642,
+ 24667,
+ 24837,
+ 22556,
+ 24627,
+ 25029,
+ 24620,
+ 24999
+ ],
+ "Black": [
+ 22620,
+ "NA",
+ "NA",
+ "NA",
+ 24115,
+ 25286,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24477,
+ "NA",
+ 24733,
+ 26280,
+ 25179,
+ 24739
+ ],
+ "Asian": [
+ 26340,
+ "NA",
+ 24685,
+ "NA",
+ 27853,
+ 23414,
+ 24273,
+ "NA",
+ 26058,
+ 27148,
+ "NA",
+ 23632,
+ 24281,
+ 22525,
+ 23709,
+ 23999
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26057,
+ 23528,
+ "NA",
+ 24636
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24043,
+ "NA",
+ "NA",
+ 23933,
+ "NA",
+ "NA",
+ 24084,
+ 25414,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24148,
+ 24357,
+ "NA",
+ "NA",
+ "NA",
+ 26115,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25631,
+ 27481,
+ 24966,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,006",
+ "x",
+ "£23,983",
+ "£24,450",
+ "£23,700",
+ "£23,491",
+ "£24,873",
+ "£24,267",
+ "£25,642",
+ "£24,667",
+ "£24,837",
+ "£22,556",
+ "£24,627",
+ "£25,029",
+ "£24,620",
+ "£24,999"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£22,620",
+ "x",
+ "x",
+ "x",
+ "£24,115",
+ "£25,286",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,477",
+ "x",
+ "£24,733",
+ "£26,280",
+ "£25,179",
+ "£24,739"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,340",
+ "x",
+ "£24,685",
+ "x",
+ "£27,853",
+ "£23,414",
+ "£24,273",
+ "x",
+ "£26,058",
+ "£27,148",
+ "x",
+ "£23,632",
+ "£24,281",
+ "£22,525",
+ "£23,709",
+ "£23,999"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,057",
+ "£23,528",
+ "x",
+ "£24,636"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,043",
+ "x",
+ "x",
+ "£23,933",
+ "x",
+ "x",
+ "£24,084",
+ "£25,414",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,148",
+ "£24,357",
+ "x",
+ "x",
+ "x",
+ "£26,115",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,631",
+ "£27,481",
+ "£24,966",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Restaurants and mobile food service activities",
+ "Holiday and other short-stay accommodation",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Other accommodation",
+ "Hotels and similar accommodation",
+ "Beverage serving activities",
+ "Event catering and other food service activities"
+ ],
+ "White": [
+ 25513,
+ 25481,
+ 22307,
+ 25468,
+ 26104,
+ 24796,
+ 24130
+ ],
+ "Black": [
+ "NA",
+ 24052,
+ "NA",
+ "NA",
+ 25522,
+ "NA",
+ 24400
+ ],
+ "Asian": [
+ 24337,
+ "NA",
+ "NA",
+ 25008,
+ 25348,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25212,
+ 25849
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25842,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 22708
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,513",
+ "£25,481",
+ "£22,307",
+ "£25,468",
+ "£26,104",
+ "£24,796",
+ "£24,130"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,052",
+ "x",
+ "x",
+ "£25,522",
+ "x",
+ "£24,400"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,337",
+ "x",
+ "x",
+ "£25,008",
+ "£25,348",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,212",
+ "£25,849"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,842",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£22,708"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Veterinary activities",
+ "Architectural and engineering activities and related technical consultancy",
+ "Market research and public opinion polling",
+ "Advertising",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Legal activities",
+ "Management consultancy activities",
+ "Research and experimental development on social sciences and humanities",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Activities of head offices",
+ "Research and experimental development on natural sciences and engineering",
+ "Technical testing and analysis",
+ "Translation and interpretation activities"
+ ],
+ "White": [
+ 24536,
+ 23982,
+ 25523,
+ 26313,
+ 25370,
+ 24942,
+ 25387,
+ 24598,
+ 26174,
+ 25630,
+ 23223,
+ 25807,
+ 26890
+ ],
+ "Black": [
+ "NA",
+ 24214,
+ 25566,
+ "NA",
+ 26155,
+ 24314,
+ 25404,
+ "NA",
+ "NA",
+ 25732,
+ 26148,
+ 25092,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 25140,
+ 24465,
+ 25894,
+ 24143,
+ 25073,
+ 24018,
+ 24061,
+ 26312,
+ 25284,
+ 23046,
+ 22814,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 25694,
+ 26404,
+ "NA",
+ 25706,
+ "NA",
+ 25740,
+ 23677,
+ 26409,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25356,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23787,
+ 26737,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24972,
+ "NA",
+ 25469,
+ "NA",
+ "NA",
+ "NA",
+ 25975,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,536",
+ "£23,982",
+ "£25,523",
+ "£26,313",
+ "£25,370",
+ "£24,942",
+ "£25,387",
+ "£24,598",
+ "£26,174",
+ "£25,630",
+ "£23,223",
+ "£25,807",
+ "£26,890"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,214",
+ "£25,566",
+ "x",
+ "£26,155",
+ "£24,314",
+ "£25,404",
+ "x",
+ "x",
+ "£25,732",
+ "£26,148",
+ "£25,092",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,140",
+ "£24,465",
+ "£25,894",
+ "£24,143",
+ "£25,073",
+ "£24,018",
+ "£24,061",
+ "£26,312",
+ "£25,284",
+ "£23,046",
+ "£22,814",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£25,694",
+ "£26,404",
+ "x",
+ "£25,706",
+ "x",
+ "£25,740",
+ "£23,677",
+ "£26,409",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,356",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,787",
+ "£26,737",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,972",
+ "x",
+ "£25,469",
+ "x",
+ "x",
+ "x",
+ "£25,975",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Software publishing",
+ "Computer programming; consultancy and related activities",
+ "Other information service activities",
+ "Motion picture; video and television programme activities",
+ "Publishing of books; periodicals and other publishing activities",
+ "Other telecommunications activities",
+ "Data processing; hosting and related activities; web portals",
+ "Satellite telecommunications activities",
+ "Television programming and broadcasting activities",
+ "Wireless telecommunications activities"
+ ],
+ "White": [
+ "NA",
+ 24675,
+ 25369,
+ 24565,
+ 27302,
+ 24772,
+ 24844,
+ 23930,
+ 23810,
+ 24168
+ ],
+ "Black": [
+ "NA",
+ 23373,
+ "NA",
+ "NA",
+ 24989,
+ "NA",
+ 27032,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 25334,
+ 27678,
+ "NA",
+ 24951,
+ 26984,
+ 23860,
+ 26099,
+ 24399,
+ "NA",
+ 25354
+ ],
+ "Mixed": [
+ "NA",
+ 24491,
+ "NA",
+ "NA",
+ "NA",
+ 25156,
+ "NA",
+ "NA",
+ 23724,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 25412,
+ 25932,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24301,
+ "NA",
+ 25439,
+ 26821,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,675",
+ "£25,369",
+ "£24,565",
+ "£27,302",
+ "£24,772",
+ "£24,844",
+ "£23,930",
+ "£23,810",
+ "£24,168"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,373",
+ "x",
+ "x",
+ "£24,989",
+ "x",
+ "£27,032",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,334",
+ "£27,678",
+ "x",
+ "£24,951",
+ "£26,984",
+ "£23,860",
+ "£26,099",
+ "£24,399",
+ "x",
+ "£25,354"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,491",
+ "x",
+ "x",
+ "x",
+ "£25,156",
+ "x",
+ "x",
+ "£23,724",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,412",
+ "£25,932",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,301",
+ "x",
+ "£25,439",
+ "£26,821",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Higher education",
+ "Secondary education",
+ "Other education",
+ "Pre-primary education",
+ "Primary education",
+ "Educational support activities"
+ ],
+ "White": [
+ 24956,
+ 25531,
+ 23881,
+ 26400,
+ 25146,
+ 25273
+ ],
+ "Black": [
+ 24144,
+ 25798,
+ 24715,
+ 23733,
+ 24166,
+ 24475
+ ],
+ "Asian": [
+ 24338,
+ 25987,
+ 24837,
+ 25635,
+ 24581,
+ "NA"
+ ],
+ "Mixed": [
+ 24706,
+ 26510,
+ 23031,
+ "NA",
+ 25340,
+ "NA"
+ ],
+ "Other": [
+ 23884,
+ 24363,
+ 24463,
+ "NA",
+ 27873,
+ "NA"
+ ],
+ "Not known": [
+ 24015,
+ 25082,
+ 24438,
+ "NA",
+ 25695,
+ 25713
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,956",
+ "£25,531",
+ "£23,881",
+ "£26,400",
+ "£25,146",
+ "£25,273"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,144",
+ "£25,798",
+ "£24,715",
+ "£23,733",
+ "£24,166",
+ "£24,475"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,338",
+ "£25,987",
+ "£24,837",
+ "£25,635",
+ "£24,581",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,706",
+ "£26,510",
+ "£23,031",
+ "x",
+ "£25,340",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,884",
+ "£24,363",
+ "£24,463",
+ "x",
+ "£27,873",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,015",
+ "£25,082",
+ "£24,438",
+ "x",
+ "£25,695",
+ "£25,713"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Remediation activities and other waste management services",
+ "Waste collection",
+ "Materials recovery",
+ "Water collection; treatment and supply",
+ "Sewerage"
+ ],
+ "White": [
+ 24838,
+ 26275,
+ 25255,
+ 24543,
+ 25082
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,838",
+ "£26,275",
+ "£25,255",
+ "£24,543",
+ "£25,082"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Other personal service activities",
+ "Repair of computers and communication equipment",
+ "Activities of other membership organisations",
+ "Repair of personal and household goods",
+ "Activities of business; employers and professional membership organisations"
+ ],
+ "White": [
+ 26875,
+ 24382,
+ 26417,
+ 24288,
+ 25264
+ ],
+ "Black": [
+ 26037,
+ "NA",
+ 24864,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 24948,
+ "NA",
+ 24427,
+ "NA",
+ 25212
+ ],
+ "Mixed": [
+ 25761,
+ 25584,
+ 25019,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25097,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,875",
+ "£24,382",
+ "£26,417",
+ "£24,288",
+ "£25,264"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,037",
+ "x",
+ "£24,864",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,948",
+ "x",
+ "£24,427",
+ "x",
+ "£25,212"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,761",
+ "£25,584",
+ "£25,019",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,097",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Development of building projects",
+ "Electrical; plumbing and other construction installation activities",
+ "Building completion and finishing",
+ "Construction of residential and non-residential buildings",
+ "Other specialised construction activities",
+ "Construction of other civil engineering projects"
+ ],
+ "White": [
+ 25899,
+ 25175,
+ 24823,
+ 23674,
+ 24626,
+ 25387
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 24994,
+ 24683,
+ "NA",
+ 26208
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 24617,
+ "NA",
+ 25473
+ ],
+ "Other": [
+ 24534,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,899",
+ "£25,175",
+ "£24,823",
+ "£23,674",
+ "£24,626",
+ "£25,387"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,994",
+ "£24,683",
+ "x",
+ "£26,208"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,617",
+ "x",
+ "£25,473"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,534",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Other human health activities",
+ "Residential care activities for the elderly and disabled",
+ "Other residential care activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Other social work activities without accommodation",
+ "Hospital activities",
+ "Residential nursing care activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Medical and dental practice activities"
+ ],
+ "White": [
+ 25573,
+ 25761,
+ 24633,
+ 25301,
+ 25168,
+ 25072,
+ 26882,
+ 23621,
+ 23411
+ ],
+ "Black": [
+ 24954,
+ 24815,
+ 24378,
+ 26338,
+ 24189,
+ 23402,
+ 25759,
+ 24228,
+ 23461
+ ],
+ "Asian": [
+ 25838,
+ 23252,
+ 24613,
+ 24184,
+ 26455,
+ 21797,
+ 24247,
+ 24360,
+ 26066
+ ],
+ "Mixed": [
+ 26303,
+ "NA",
+ 25342,
+ "NA",
+ 23757,
+ 24363,
+ 24022,
+ 24290,
+ 26330
+ ],
+ "Other": [
+ 23541,
+ "NA",
+ "NA",
+ "NA",
+ 23621,
+ 25026,
+ "NA",
+ "NA",
+ 23449
+ ],
+ "Not known": [
+ 25796,
+ "NA",
+ 24397,
+ "NA",
+ 26480,
+ 25042,
+ 24127,
+ 23699,
+ 25488
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,573",
+ "£25,761",
+ "£24,633",
+ "£25,301",
+ "£25,168",
+ "£25,072",
+ "£26,882",
+ "£23,621",
+ "£23,411"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,954",
+ "£24,815",
+ "£24,378",
+ "£26,338",
+ "£24,189",
+ "£23,402",
+ "£25,759",
+ "£24,228",
+ "£23,461"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,838",
+ "£23,252",
+ "£24,613",
+ "£24,184",
+ "£26,455",
+ "£21,797",
+ "£24,247",
+ "£24,360",
+ "£26,066"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,303",
+ "x",
+ "£25,342",
+ "x",
+ "£23,757",
+ "£24,363",
+ "£24,022",
+ "£24,290",
+ "£26,330"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,541",
+ "x",
+ "x",
+ "x",
+ "£23,621",
+ "£25,026",
+ "x",
+ "x",
+ "£23,449"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,796",
+ "x",
+ "£24,397",
+ "x",
+ "£26,480",
+ "£25,042",
+ "£24,127",
+ "£23,699",
+ "£25,488"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Provision of services to the community as a whole",
+ "Administration of the State and the economic and social policy of the community",
+ "Compulsory social security activities"
+ ],
+ "White": [
+ 24598,
+ 23538,
+ 26190
+ ],
+ "Black": [
+ 26853,
+ 25092,
+ 24714
+ ],
+ "Asian": [
+ "NA",
+ 25455,
+ 24648
+ ],
+ "Mixed": [
+ 26146,
+ 24814,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 25152,
+ "NA"
+ ],
+ "Not known": [
+ 24228,
+ 26146,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,598",
+ "£23,538",
+ "£26,190"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£26,853",
+ "£25,092",
+ "£24,714"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,455",
+ "£24,648"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,146",
+ "£24,814",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,152",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,228",
+ "£26,146",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail trade not in stores; stalls or markets",
+ "Wholesale of information and communication equipment",
+ "Retail sale of automotive fuel in specialised stores",
+ "Wholesale of household goods",
+ "Retail sale via stalls and markets",
+ "Non-specialised wholesale trade",
+ "Maintenance and repair of motor vehicles",
+ "Sale of motor vehicles",
+ "Retail sale of other household equipment in specialised stores",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Other specialised wholesale",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Retail sale in non-specialised stores",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Retail sale of other goods in specialised stores",
+ "Sale of motor vehicle parts and accessories",
+ "Wholesale of food; beverages and tobacco",
+ "Wholesale on a fee or contract basis",
+ "Wholesale of other machinery; equipment and supplies"
+ ],
+ "White": [
+ 25717,
+ 26223,
+ 24402,
+ 24833,
+ 25018,
+ 23852,
+ 25686,
+ 25575,
+ 23642,
+ 24405,
+ 24038,
+ 24776,
+ 23128,
+ 24248,
+ 22197,
+ 24407,
+ 24801,
+ 23409,
+ 25092
+ ],
+ "Black": [
+ 24732,
+ 25390,
+ "NA",
+ 24136,
+ "NA",
+ 25384,
+ "NA",
+ "NA",
+ 26068,
+ 25519,
+ "NA",
+ 25208,
+ 26919,
+ "NA",
+ 24635,
+ 26892,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 26184,
+ "NA",
+ "NA",
+ 23005,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24280,
+ 25036,
+ 25043,
+ 24982,
+ 26311,
+ "NA",
+ 24546,
+ "NA",
+ "NA",
+ "NA",
+ 23653
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 24168,
+ "NA",
+ 26270,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24372,
+ "NA",
+ 23383,
+ "NA",
+ 25223,
+ "NA",
+ 26634,
+ "NA",
+ 27050
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 23293,
+ 24431,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23797,
+ "NA",
+ 25007,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25768,
+ "NA",
+ "NA",
+ 25619,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26074,
+ "NA",
+ 26014,
+ "NA",
+ 23262,
+ "NA",
+ 24836,
+ "NA",
+ "NA",
+ "NA",
+ 25305
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,717",
+ "£26,223",
+ "£24,402",
+ "£24,833",
+ "£25,018",
+ "£23,852",
+ "£25,686",
+ "£25,575",
+ "£23,642",
+ "£24,405",
+ "£24,038",
+ "£24,776",
+ "£23,128",
+ "£24,248",
+ "£22,197",
+ "£24,407",
+ "£24,801",
+ "£23,409",
+ "£25,092"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,732",
+ "£25,390",
+ "x",
+ "£24,136",
+ "x",
+ "£25,384",
+ "x",
+ "x",
+ "£26,068",
+ "£25,519",
+ "x",
+ "£25,208",
+ "£26,919",
+ "x",
+ "£24,635",
+ "£26,892",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,184",
+ "x",
+ "x",
+ "£23,005",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,280",
+ "£25,036",
+ "£25,043",
+ "£24,982",
+ "£26,311",
+ "x",
+ "£24,546",
+ "x",
+ "x",
+ "x",
+ "£23,653"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,168",
+ "x",
+ "£26,270",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,372",
+ "x",
+ "£23,383",
+ "x",
+ "£25,223",
+ "x",
+ "£26,634",
+ "x",
+ "£27,050"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,293",
+ "£24,431",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,797",
+ "x",
+ "£25,007",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,768",
+ "x",
+ "x",
+ "£25,619",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,074",
+ "x",
+ "£26,014",
+ "x",
+ "£23,262",
+ "x",
+ "£24,836",
+ "x",
+ "x",
+ "x",
+ "£25,305"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution"
+ ],
+ "White": [
+ 22448
+ ],
+ "Black": [
+ 25292
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£22,448"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,292"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Renting and operating of own or leased real estate",
+ "Buying and selling of own real estate",
+ "Real estate activities on a fee or contract basis"
+ ],
+ "White": [
+ 25025,
+ 24215,
+ 24383
+ ],
+ "Black": [
+ 23750,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 26163,
+ "NA",
+ 25838
+ ],
+ "Mixed": [
+ 25450,
+ "NA",
+ 23492
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25125
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,025",
+ "£24,215",
+ "£24,383"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,750",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,163",
+ "x",
+ "£25,838"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,450",
+ "x",
+ "£23,492"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,125"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Combined facilities support activities"
+ ],
+ "White": [
+ 25211
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,211"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of cutlery; tools and general hardware",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of games and toys",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of beverages",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Printing and service activities related to printing",
+ "Manufacture of structural metal products",
+ "Manufacture of sports goods",
+ "Manufacture of plastics products",
+ "Manufacture of other chemical products",
+ "Manufacture of other special-purpose machinery",
+ "Manufacture of domestic appliances",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacturing n.e.c.",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of prepared animal feeds",
+ "Installation of industrial machinery and equipment",
+ "Manufacture of dairy products",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of motor vehicles",
+ "Manufacture of other food products",
+ "Building of ships and boats",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Manufacture of pharmaceutical preparations"
+ ],
+ "White": [
+ 23290,
+ 25525,
+ 25707,
+ 25329,
+ 25441,
+ 26933,
+ 25512,
+ 26342,
+ "NA",
+ 26072,
+ 26863,
+ 23388,
+ 25105,
+ 24057,
+ 26442,
+ 25861,
+ 25606,
+ 23668,
+ 23882,
+ 24789,
+ 24909,
+ 24090,
+ 25363,
+ 27042,
+ 25098,
+ 25113,
+ 24603,
+ 26452,
+ 24921,
+ 25300,
+ 24373,
+ "NA",
+ 24095,
+ 24950,
+ 26637,
+ 26294,
+ 25012,
+ 24985,
+ 25250,
+ 26243
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24519,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24681,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24007
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24371,
+ "NA",
+ 26944,
+ "NA",
+ "NA",
+ 24450,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23275,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26120,
+ "NA",
+ 24114,
+ 23835,
+ "NA",
+ 26640,
+ "NA",
+ 25006,
+ "NA",
+ 24375,
+ 23743
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26017,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26218,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25378,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25680,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26185,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25529,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,290",
+ "£25,525",
+ "£25,707",
+ "£25,329",
+ "£25,441",
+ "£26,933",
+ "£25,512",
+ "£26,342",
+ "x",
+ "£26,072",
+ "£26,863",
+ "£23,388",
+ "£25,105",
+ "£24,057",
+ "£26,442",
+ "£25,861",
+ "£25,606",
+ "£23,668",
+ "£23,882",
+ "£24,789",
+ "£24,909",
+ "£24,090",
+ "£25,363",
+ "£27,042",
+ "£25,098",
+ "£25,113",
+ "£24,603",
+ "£26,452",
+ "£24,921",
+ "£25,300",
+ "£24,373",
+ "x",
+ "£24,095",
+ "£24,950",
+ "£26,637",
+ "£26,294",
+ "£25,012",
+ "£24,985",
+ "£25,250",
+ "£26,243"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,519",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,681",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,007"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,371",
+ "x",
+ "£26,944",
+ "x",
+ "x",
+ "£24,450",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,275",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,120",
+ "x",
+ "£24,114",
+ "£23,835",
+ "x",
+ "£26,640",
+ "x",
+ "£25,006",
+ "x",
+ "£24,375",
+ "£23,743"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,017",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,218",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,378",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,680",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,185",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,529",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 23788
+ ],
+ "Black": [
+ 23831
+ ],
+ "Asian": [
+ 26264
+ ],
+ "Mixed": [
+ 23729
+ ],
+ "Other": [
+ 24123
+ ],
+ "Not known": [
+ 26661
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,788"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,831"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,264"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£23,729"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,123"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£26,661"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,400",
+ "£24,200",
+ "£26,700",
+ "£23,400",
+ "£26,300",
+ "£23,700",
+ "£23,600",
+ "£25,100",
+ "£25,000",
+ "£25,400",
+ "£24,100",
+ "£27,800",
+ "£25,500",
+ "£26,100",
+ "£25,500",
+ "£24,600",
+ "£23,300",
+ "£23,500",
+ "£24,100",
+ "£23,500",
+ "£25,400"
+ ],
+ "footer": "21,905",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£27,000",
+ "x",
+ "£26,300",
+ "£24,100",
+ "£24,600",
+ "£25,500",
+ "£24,700",
+ "£24,700",
+ "£25,000",
+ "£24,700",
+ "x",
+ "£24,800",
+ "£23,800",
+ "£25,600",
+ "£25,600",
+ "£26,100",
+ "£24,600",
+ "£24,600",
+ "x",
+ "£24,700",
+ "£25,700"
+ ],
+ "footer": "22,520",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,600",
+ "x",
+ "£25,100",
+ "£27,200",
+ "£26,300",
+ "£25,900",
+ "£24,700",
+ "£25,500",
+ "£24,800",
+ "£25,300",
+ "x",
+ "£22,600",
+ "x",
+ "£25,500",
+ "£24,900",
+ "£25,100",
+ "x",
+ "£26,400",
+ "x",
+ "£24,800",
+ "£25,100"
+ ],
+ "footer": "15,285",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,900",
+ "x",
+ "£24,500",
+ "£23,700",
+ "x",
+ "£23,800",
+ "£25,400",
+ "£24,500",
+ "£24,900",
+ "£24,700",
+ "x",
+ "£24,800",
+ "£25,000",
+ "£24,100",
+ "£25,100",
+ "£25,700",
+ "x",
+ "£25,700",
+ "x",
+ "£24,800",
+ "£24,900"
+ ],
+ "footer": "16,310",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£24,000",
+ "£26,000",
+ "x",
+ "x",
+ "£24,000",
+ "£25,900",
+ "£24,100",
+ "£23,300",
+ "£25,100",
+ "x",
+ "x",
+ "£24,100",
+ "£25,900",
+ "£25,600",
+ "£23,700",
+ "x",
+ "x",
+ "x",
+ "£24,200",
+ "£25,300"
+ ],
+ "footer": "11,955",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,600",
+ "x",
+ "£26,000",
+ "£24,900",
+ "£24,400",
+ "£25,500",
+ "£27,700",
+ "£25,600",
+ "£24,400",
+ "£23,100",
+ "x",
+ "£25,100",
+ "x",
+ "£25,300",
+ "£24,300",
+ "£25,600",
+ "x",
+ "£26,300",
+ "x",
+ "£24,600",
+ "£25,100"
+ ],
+ "footer": "18,265",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27800\n var min = 22600\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style",
+ "tag.attribs.columns.6.style",
+ "tag.attribs.columns.7.style",
+ "tag.attribs.columns.8.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of Allied health, 5 years after graduation, Accommodation and food service activities <\/b> was the most common industry for and White ethnicity graduates,\n Transportation and storage <\/b> was the most common industry for and Black ethnicity graduates, Education <\/b> was the most common industry for and Asian ethnicity graduates, Administrative and support service activities <\/b> was the most common industry for Mixed and Other ethnicity graduates, and Financial and insurance activities <\/b> was the most common industry for and Not known ethnicity graduates.
The industry with the largest range in proportions was Administrative and support service activities<\/b>\n where Other ethnicity graduates had the highest proportion and Asian\n ethnicity graduates had the lowest proportion.The industry with the largest range in median earnings was Other service activities<\/b>\n where White ethnicity graduates the highest median earnings (£27,800<\/b>) and Asian ethnicity graduates had the lowest median earnings (£22,600<\/b>).The group with the highest median earnings was White<\/b> ethnicity graduates in\n the Other service activities<\/b> industry (median earnings of £27,800<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of Allied health by ethnicity, five years after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_6.json b/tests/shinytest/testUI-current/subjectByIndustry_6.json
new file mode 100644
index 0000000..7b833c6
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_6.json
@@ -0,0 +1,5308 @@
+{
+ "input": {
+ "countinput2": "ethnicity",
+ "crosstabs.subjectinput": "Allied health",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "1"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Transportation and storage",
+ "Human health and social work activities",
+ "Public administration and defence - compulsory social security",
+ "Manufacturing",
+ "Real estate activities",
+ "Professional, scientific and technical activities",
+ "Electricity, gas, steam and air conditioning supply",
+ "Other service activities",
+ "Agriculture, forestry and fishing",
+ "Information and communication",
+ "Arts, entertainment and recreation",
+ "Mining and quarrying",
+ "Accommodation and food service activities",
+ "Construction",
+ "Financial and insurance activities",
+ "Education",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Administrative and support service activities",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "White": [
+ 26100,
+ 26200,
+ 26300,
+ 22800,
+ 24800,
+ 24500,
+ 24400,
+ 23900,
+ 25700,
+ 24800,
+ 23400,
+ 25800,
+ 22700,
+ "NA",
+ 25900,
+ 23100,
+ 24400,
+ 26000,
+ 23700,
+ 24500,
+ 24600
+ ],
+ "Black": [
+ 26500,
+ 25900,
+ 23600,
+ 24800,
+ 25100,
+ 25400,
+ 24300,
+ 25000,
+ "NA",
+ 24600,
+ "NA",
+ 25600,
+ 25100,
+ "NA",
+ 24100,
+ 23700,
+ 25100,
+ 25500,
+ 23900,
+ 24200,
+ 24500
+ ],
+ "Asian": [
+ 24600,
+ "NA",
+ 23800,
+ 24500,
+ 24800,
+ 25200,
+ 24800,
+ 22800,
+ "NA",
+ 24600,
+ "NA",
+ 25200,
+ 24300,
+ "NA",
+ 25600,
+ 24800,
+ 24600,
+ 25000,
+ "NA",
+ 24200,
+ 24500
+ ],
+ "Mixed": [
+ 24700,
+ "NA",
+ 24400,
+ 23900,
+ 26000,
+ 26000,
+ 25200,
+ 24600,
+ "NA",
+ 27900,
+ "NA",
+ 26000,
+ 27100,
+ "NA",
+ 26500,
+ "NA",
+ 25300,
+ 27000,
+ 25100,
+ 26900,
+ 26500
+ ],
+ "Other": [
+ 24400,
+ "NA",
+ 24200,
+ 23100,
+ 25300,
+ 25300,
+ 25500,
+ 25500,
+ "NA",
+ 25600,
+ "NA",
+ "NA",
+ 23200,
+ "NA",
+ "NA",
+ 26400,
+ 24800,
+ 23100,
+ "NA",
+ 23600,
+ 25400
+ ],
+ "Not known": [
+ 23300,
+ "NA",
+ 24400,
+ 25900,
+ 24400,
+ 25400,
+ 25000,
+ 24800,
+ "NA",
+ "NA",
+ 24300,
+ 25000,
+ 23700,
+ 25300,
+ 24800,
+ "NA",
+ 26800,
+ 25200,
+ "NA",
+ 25200,
+ 25200
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Retail trade not in stores; stalls or markets",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Wholesale on a fee or contract basis",
+ "Sale of motor vehicle parts and accessories",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Other specialised wholesale",
+ "Retail sale of other household equipment in specialised stores",
+ "Wholesale of information and communication equipment",
+ "Wholesale of other machinery; equipment and supplies",
+ "Sale of motor vehicles",
+ "Maintenance and repair of motor vehicles",
+ "Wholesale of food; beverages and tobacco",
+ "Non-specialised wholesale trade",
+ "Retail sale of automotive fuel in specialised stores",
+ "Retail sale of other goods in specialised stores",
+ "Retail sale in non-specialised stores",
+ "Wholesale of household goods"
+ ],
+ "White": [
+ 26348,
+ 28329,
+ 23661,
+ 24856,
+ 26275,
+ 24813,
+ 24361,
+ 25543,
+ 28031,
+ 24820,
+ 25089,
+ 24692,
+ 24910,
+ 25715,
+ 27309,
+ 25789,
+ 26355,
+ 26220
+ ],
+ "Black": [
+ 23644,
+ "NA",
+ 24529,
+ "NA",
+ "NA",
+ "NA",
+ 26090,
+ 25404,
+ "NA",
+ 25228,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23325,
+ 25416,
+ 26081
+ ],
+ "Asian": [
+ 26002,
+ 24304,
+ 25143,
+ "NA",
+ "NA",
+ 24122,
+ "NA",
+ 25693,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25410,
+ 25312,
+ "NA",
+ 25386,
+ 22896,
+ 25288
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25271,
+ "NA",
+ 26110,
+ "NA",
+ "NA",
+ 27337,
+ "NA",
+ "NA",
+ 26648,
+ "NA",
+ 23807,
+ 25603,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 24197,
+ "NA",
+ "NA",
+ "NA",
+ 23914,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24147,
+ "NA",
+ "NA",
+ 25020,
+ 24017,
+ 25195
+ ],
+ "Not known": [
+ "NA",
+ 26902,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24838,
+ 25498,
+ 25028
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,348",
+ "£28,329",
+ "£23,661",
+ "£24,856",
+ "£26,275",
+ "£24,813",
+ "£24,361",
+ "£25,543",
+ "£28,031",
+ "£24,820",
+ "£25,089",
+ "£24,692",
+ "£24,910",
+ "£25,715",
+ "£27,309",
+ "£25,789",
+ "£26,355",
+ "£26,220"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,644",
+ "x",
+ "£24,529",
+ "x",
+ "x",
+ "x",
+ "£26,090",
+ "£25,404",
+ "x",
+ "£25,228",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,325",
+ "£25,416",
+ "£26,081"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,002",
+ "£24,304",
+ "£25,143",
+ "x",
+ "x",
+ "£24,122",
+ "x",
+ "£25,693",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,410",
+ "£25,312",
+ "x",
+ "£25,386",
+ "£22,896",
+ "£25,288"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,271",
+ "x",
+ "£26,110",
+ "x",
+ "x",
+ "£27,337",
+ "x",
+ "x",
+ "£26,648",
+ "x",
+ "£23,807",
+ "£25,603",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,197",
+ "x",
+ "x",
+ "x",
+ "£23,914",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,147",
+ "x",
+ "x",
+ "£25,020",
+ "£24,017",
+ "£25,195"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,902",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,838",
+ "£25,498",
+ "£25,028"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Waste collection",
+ "Water collection; treatment and supply",
+ "Materials recovery"
+ ],
+ "White": [
+ 25012,
+ "NA",
+ 23467
+ ],
+ "Black": [
+ "NA",
+ 25662,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,012",
+ "x",
+ "£23,467"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,662",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Postal activities under universal service obligation",
+ "Passenger air transport",
+ "Other passenger land transport",
+ "Support activities for transportation",
+ "Passenger rail transport; interurban",
+ "Sea and coastal freight water transport",
+ "Other postal and courier activities",
+ "Freight transport by road and removal services",
+ "Warehousing and storage"
+ ],
+ "White": [
+ 25015,
+ 25214,
+ 25035,
+ 26048,
+ 26768,
+ "NA",
+ 24900,
+ 23346,
+ 23480
+ ],
+ "Black": [
+ "NA",
+ 25452,
+ 25309,
+ 25937,
+ "NA",
+ 24889,
+ 25238,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ 25132,
+ 25081,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25124
+ ],
+ "Mixed": [
+ 24003,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25756,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25385,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,015",
+ "£25,214",
+ "£25,035",
+ "£26,048",
+ "£26,768",
+ "x",
+ "£24,900",
+ "£23,346",
+ "£23,480"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,452",
+ "£25,309",
+ "£25,937",
+ "x",
+ "£24,889",
+ "£25,238",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,132",
+ "£25,081",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,124"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,003",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,756",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,385",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Other residential care activities",
+ "Residential nursing care activities",
+ "Other human health activities",
+ "Hospital activities",
+ "Other social work activities without accommodation",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Medical and dental practice activities",
+ "Residential care activities for the elderly and disabled"
+ ],
+ "White": [
+ 25614,
+ 24545,
+ 24636,
+ 23145,
+ 24232,
+ 25658,
+ 24981,
+ 24729,
+ 25164
+ ],
+ "Black": [
+ 24783,
+ 25635,
+ 24931,
+ 24477,
+ 25478,
+ 25067,
+ 25613,
+ 22785,
+ 24948
+ ],
+ "Asian": [
+ 25513,
+ 25205,
+ 24666,
+ 24764,
+ 26018,
+ 25623,
+ 23120,
+ 23739,
+ 26298
+ ],
+ "Mixed": [
+ 25346,
+ 25975,
+ 26163,
+ 24641,
+ 25281,
+ "NA",
+ 24990,
+ "NA",
+ 24075
+ ],
+ "Other": [
+ 23605,
+ "NA",
+ 27174,
+ 25401,
+ 27114,
+ "NA",
+ 23660,
+ 25989,
+ "NA"
+ ],
+ "Not known": [
+ 22357,
+ 24075,
+ 25546,
+ 23907,
+ 24945,
+ "NA",
+ 26101,
+ 25337,
+ 24367
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,614",
+ "£24,545",
+ "£24,636",
+ "£23,145",
+ "£24,232",
+ "£25,658",
+ "£24,981",
+ "£24,729",
+ "£25,164"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,783",
+ "£25,635",
+ "£24,931",
+ "£24,477",
+ "£25,478",
+ "£25,067",
+ "£25,613",
+ "£22,785",
+ "£24,948"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,513",
+ "£25,205",
+ "£24,666",
+ "£24,764",
+ "£26,018",
+ "£25,623",
+ "£23,120",
+ "£23,739",
+ "£26,298"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,346",
+ "£25,975",
+ "£26,163",
+ "£24,641",
+ "£25,281",
+ "x",
+ "£24,990",
+ "x",
+ "£24,075"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,605",
+ "x",
+ "£27,174",
+ "£25,401",
+ "£27,114",
+ "x",
+ "£23,660",
+ "£25,989",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£22,357",
+ "£24,075",
+ "£25,546",
+ "£23,907",
+ "£24,945",
+ "x",
+ "£26,101",
+ "£25,337",
+ "£24,367"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Compulsory social security activities",
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole"
+ ],
+ "White": [
+ 25039,
+ 24750,
+ 24024
+ ],
+ "Black": [
+ "NA",
+ 25693,
+ 25659
+ ],
+ "Asian": [
+ "NA",
+ 24095,
+ 24755
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 23599
+ ],
+ "Other": [
+ 24867,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25206,
+ 24797,
+ 26137
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,039",
+ "£24,750",
+ "£24,024"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,693",
+ "£25,659"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,095",
+ "£24,755"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£23,599"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,867",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,206",
+ "£24,797",
+ "£26,137"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of beverages",
+ "Manufacture of electronic components and boards",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Manufacture of other porcelain and ceramic products",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of railway locomotives and rolling stock",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Installation of industrial machinery and equipment",
+ "Manufacture of medical and dental instruments and supplies",
+ "Manufacture of grain mill products; starches and starch products",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Manufacturing n.e.c.",
+ "Manufacture of basic precious and other non-ferrous metals",
+ "Tanning and dressing of leather; manufacture of luggage; handbags; saddlery and harness; dressing and dyeing of fur",
+ "Manufacture of wiring and wiring devices",
+ "Manufacture of pharmaceutical preparations",
+ "Printing and service activities related to printing",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of furniture",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of plastics products",
+ "Manufacture of other food products",
+ "Manufacture of other chemical products",
+ "Manufacture of paints; varnishes and similar coatings; printing ink and mastics",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Manufacture of motor vehicles",
+ "Manufacture of bakery and farinaceous products",
+ "Manufacture of footwear",
+ "Manufacture of general-purpose machinery",
+ "Treatment and coating of metals; machining",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of dairy products",
+ "Manufacture of basic pharmaceutical products",
+ "Manufacture of sports goods",
+ "Manufacture of electric lighting equipment"
+ ],
+ "White": [
+ 23755,
+ 24662,
+ 24270,
+ 25430,
+ 23707,
+ 21983,
+ 24982,
+ 24258,
+ "NA",
+ 25995,
+ 24518,
+ 24443,
+ "NA",
+ 24690,
+ 24715,
+ 25662,
+ 25792,
+ "NA",
+ 26044,
+ 23717,
+ 24790,
+ 25059,
+ 22573,
+ 23506,
+ 23683,
+ 26681,
+ 24400,
+ 24324,
+ 24442,
+ 24805,
+ "NA",
+ 23455,
+ 25526,
+ 24433,
+ 27981,
+ 24374,
+ 26503,
+ 26890
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24914,
+ 25502,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23889,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26771,
+ 25692,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24444,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23858,
+ "NA",
+ "NA",
+ 26284,
+ "NA",
+ "NA",
+ "NA",
+ 26316,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24399,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24185,
+ "NA",
+ 25730,
+ "NA",
+ "NA",
+ "NA",
+ 24542,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25540,
+ 24887,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24431,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24938,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25306,
+ "NA",
+ "NA",
+ 24197,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ 24243,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24744,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24669,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 22050,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24973,
+ 24097,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,755",
+ "£24,662",
+ "£24,270",
+ "£25,430",
+ "£23,707",
+ "£21,983",
+ "£24,982",
+ "£24,258",
+ "x",
+ "£25,995",
+ "£24,518",
+ "£24,443",
+ "x",
+ "£24,690",
+ "£24,715",
+ "£25,662",
+ "£25,792",
+ "x",
+ "£26,044",
+ "£23,717",
+ "£24,790",
+ "£25,059",
+ "£22,573",
+ "£23,506",
+ "£23,683",
+ "£26,681",
+ "£24,400",
+ "£24,324",
+ "£24,442",
+ "£24,805",
+ "x",
+ "£23,455",
+ "£25,526",
+ "£24,433",
+ "£27,981",
+ "£24,374",
+ "£26,503",
+ "£26,890"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,914",
+ "£25,502",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,889",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,771",
+ "£25,692",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,444",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,858",
+ "x",
+ "x",
+ "£26,284",
+ "x",
+ "x",
+ "x",
+ "£26,316",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,399",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,185",
+ "x",
+ "£25,730",
+ "x",
+ "x",
+ "x",
+ "£24,542",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,540",
+ "£24,887",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,431",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,938",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,306",
+ "x",
+ "x",
+ "£24,197",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,243",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,744",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,669",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£22,050",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,973",
+ "£24,097",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Renting and operating of own or leased real estate",
+ "Real estate activities on a fee or contract basis"
+ ],
+ "White": [
+ 23474,
+ 24471
+ ],
+ "Black": [
+ 23242,
+ 25793
+ ],
+ "Asian": [
+ 24729,
+ 26691
+ ],
+ "Mixed": [
+ "NA",
+ 25430
+ ],
+ "Other": [
+ "NA",
+ 26455
+ ],
+ "Not known": [
+ 22936,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,474",
+ "£24,471"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,242",
+ "£25,793"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,729",
+ "£26,691"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,430"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,455"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£22,936",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Specialised design activities",
+ "Advertising",
+ "Technical testing and analysis",
+ "Architectural and engineering activities and related technical consultancy",
+ "Activities of head offices",
+ "Research and experimental development on natural sciences and engineering",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Legal activities",
+ "Research and experimental development on social sciences and humanities",
+ "Market research and public opinion polling",
+ "Photographic activities",
+ "Management consultancy activities",
+ "Veterinary activities"
+ ],
+ "White": [
+ 23876,
+ 24819,
+ 26024,
+ 24103,
+ 24361,
+ 27176,
+ 25623,
+ 26362,
+ 24651,
+ 24374,
+ 24077,
+ 23857,
+ 25455,
+ 23703
+ ],
+ "Black": [
+ "NA",
+ 25004,
+ 24815,
+ 25723,
+ 25503,
+ 24580,
+ 24219,
+ 26009,
+ 25196,
+ "NA",
+ 25640,
+ "NA",
+ 24241,
+ "NA"
+ ],
+ "Asian": [
+ 25781,
+ 23903,
+ 24288,
+ 26104,
+ 23883,
+ 23407,
+ 22786,
+ 25186,
+ 24261,
+ "NA",
+ "NA",
+ "NA",
+ 23811,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ 26485,
+ "NA",
+ 24986,
+ 24038,
+ 25439,
+ "NA",
+ 25457,
+ "NA",
+ "NA",
+ 25084,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 25251,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25069,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ 24885,
+ "NA",
+ "NA",
+ "NA",
+ 23674,
+ 24376,
+ "NA",
+ "NA",
+ "NA",
+ 25206,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,876",
+ "£24,819",
+ "£26,024",
+ "£24,103",
+ "£24,361",
+ "£27,176",
+ "£25,623",
+ "£26,362",
+ "£24,651",
+ "£24,374",
+ "£24,077",
+ "£23,857",
+ "£25,455",
+ "£23,703"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,004",
+ "£24,815",
+ "£25,723",
+ "£25,503",
+ "£24,580",
+ "£24,219",
+ "£26,009",
+ "£25,196",
+ "x",
+ "£25,640",
+ "x",
+ "£24,241",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,781",
+ "£23,903",
+ "£24,288",
+ "£26,104",
+ "£23,883",
+ "£23,407",
+ "£22,786",
+ "£25,186",
+ "£24,261",
+ "x",
+ "x",
+ "x",
+ "£23,811",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£26,485",
+ "x",
+ "£24,986",
+ "£24,038",
+ "£25,439",
+ "x",
+ "£25,457",
+ "x",
+ "x",
+ "£25,084",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,251",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,069",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,885",
+ "x",
+ "x",
+ "x",
+ "£23,674",
+ "£24,376",
+ "x",
+ "x",
+ "x",
+ "£25,206",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Steam and air conditioning supply"
+ ],
+ "White": [
+ 25343,
+ 24136
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,343",
+ "£24,136"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Activities of business; employers and professional membership organisations",
+ "Repair of computers and communication equipment",
+ "Other personal service activities",
+ "Activities of trade unions",
+ "Activities of other membership organisations"
+ ],
+ "White": [
+ 25292,
+ 24688,
+ 23518,
+ 25170,
+ 24471
+ ],
+ "Black": [
+ 25375,
+ "NA",
+ 25454,
+ "NA",
+ 24282
+ ],
+ "Asian": [
+ 23023,
+ "NA",
+ 25670,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24156
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25183
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,292",
+ "£24,688",
+ "£23,518",
+ "£25,170",
+ "£24,471"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,375",
+ "x",
+ "£25,454",
+ "x",
+ "£24,282"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£23,023",
+ "x",
+ "£25,670",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,156"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,183"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 25310
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ 24235
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,310"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,235"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Motion picture; video and television programme activities",
+ "Software publishing",
+ "Sound recording and music publishing activities",
+ "Satellite telecommunications activities",
+ "Other telecommunications activities",
+ "Other information service activities",
+ "Data processing; hosting and related activities; web portals",
+ "Computer programming; consultancy and related activities",
+ "Wireless telecommunications activities",
+ "Publishing of books; periodicals and other publishing activities"
+ ],
+ "White": [
+ 25284,
+ 24329,
+ "NA",
+ 22776,
+ 25153,
+ 24311,
+ 25724,
+ 25273,
+ 25437,
+ 24356
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24140,
+ 25592,
+ 23868,
+ 25767
+ ],
+ "Asian": [
+ "NA",
+ 24192,
+ "NA",
+ "NA",
+ 26146,
+ "NA",
+ 24177,
+ 25650,
+ "NA",
+ 25315
+ ],
+ "Mixed": [
+ 23854,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23627,
+ 26390,
+ 24468,
+ 25175
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25169,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25170,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,284",
+ "£24,329",
+ "x",
+ "£22,776",
+ "£25,153",
+ "£24,311",
+ "£25,724",
+ "£25,273",
+ "£25,437",
+ "£24,356"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,140",
+ "£25,592",
+ "£23,868",
+ "£25,767"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,192",
+ "x",
+ "x",
+ "£26,146",
+ "x",
+ "£24,177",
+ "£25,650",
+ "x",
+ "£25,315"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£23,854",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,627",
+ "£26,390",
+ "£24,468",
+ "£25,175"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,169",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,170",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Gambling and betting activities",
+ "Creative; arts and entertainment activities",
+ "Sports activities",
+ "Amusement and recreation activities",
+ "Libraries; archives; museums and other cultural activities"
+ ],
+ "White": [
+ 26127,
+ 25471,
+ 23829,
+ 25013,
+ 26630
+ ],
+ "Black": [
+ 24371,
+ 23503,
+ 24929,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ 24010,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ 23599,
+ "NA",
+ 25990,
+ "NA",
+ 24095
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 24089,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 22517,
+ 25431,
+ "NA",
+ 24295
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,127",
+ "£25,471",
+ "£23,829",
+ "£25,013",
+ "£26,630"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,371",
+ "£23,503",
+ "£24,929",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,010",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£23,599",
+ "x",
+ "£25,990",
+ "x",
+ "£24,095"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,089",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£22,517",
+ "£25,431",
+ "x",
+ "£24,295"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ "NA"
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ 25007
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,007"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Restaurants and mobile food service activities",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Other accommodation",
+ "Hotels and similar accommodation",
+ "Beverage serving activities",
+ "Event catering and other food service activities",
+ "Holiday and other short-stay accommodation"
+ ],
+ "White": [
+ 25367,
+ 23970,
+ 24065,
+ 25023,
+ 25875,
+ 25534,
+ 24446
+ ],
+ "Black": [
+ 24788,
+ "NA",
+ 25509,
+ "NA",
+ 25008,
+ 24970,
+ "NA"
+ ],
+ "Asian": [
+ 25250,
+ "NA",
+ "NA",
+ 24995,
+ 26753,
+ "NA",
+ 25755
+ ],
+ "Mixed": [
+ 24643,
+ "NA",
+ "NA",
+ 25652,
+ "NA",
+ 24539,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25303,
+ "NA",
+ "NA",
+ "NA",
+ 24432,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,367",
+ "£23,970",
+ "£24,065",
+ "£25,023",
+ "£25,875",
+ "£25,534",
+ "£24,446"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,788",
+ "x",
+ "£25,509",
+ "x",
+ "£25,008",
+ "£24,970",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,250",
+ "x",
+ "x",
+ "£24,995",
+ "£26,753",
+ "x",
+ "£25,755"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,643",
+ "x",
+ "x",
+ "£25,652",
+ "x",
+ "£24,539",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,303",
+ "x",
+ "x",
+ "x",
+ "£24,432",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Electrical; plumbing and other construction installation activities",
+ "Development of building projects",
+ "Construction of other civil engineering projects",
+ "Building completion and finishing",
+ "Construction of roads and railways",
+ "Construction of residential and non-residential buildings",
+ "Other specialised construction activities"
+ ],
+ "White": [
+ 24614,
+ 25940,
+ 25929,
+ 23173,
+ 26696,
+ 25424,
+ 23006
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25770,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ 26093,
+ "NA",
+ "NA",
+ 24035
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ 25543,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,614",
+ "£25,940",
+ "£25,929",
+ "£23,173",
+ "£26,696",
+ "£25,424",
+ "£23,006"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,770",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£26,093",
+ "x",
+ "x",
+ "£24,035"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£25,543",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Fund management activities",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Pension funding",
+ "Activities auxiliary to insurance and pension funding",
+ "Monetary intermediation",
+ "Activities of holding companies",
+ "Trusts; funds and similar financial entities",
+ "Other financial service activities; except insurance and pension funding",
+ "Insurance"
+ ],
+ "White": [
+ "NA",
+ 23528,
+ 25701,
+ 25219,
+ 24878,
+ 26173,
+ 26620,
+ 23506,
+ 23960
+ ],
+ "Black": [
+ 23646,
+ "NA",
+ 25727,
+ 23559,
+ 25481,
+ "NA",
+ "NA",
+ 27019,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 23887,
+ "NA",
+ 23916,
+ 25998,
+ "NA",
+ "NA",
+ 25592,
+ 24212
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24057,
+ "NA",
+ "NA",
+ "NA",
+ 26473
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25713,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 24074,
+ "NA",
+ "NA",
+ 25450,
+ 23600,
+ "NA",
+ "NA",
+ "NA",
+ 24434
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,528",
+ "£25,701",
+ "£25,219",
+ "£24,878",
+ "£26,173",
+ "£26,620",
+ "£23,506",
+ "£23,960"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,646",
+ "x",
+ "£25,727",
+ "£23,559",
+ "£25,481",
+ "x",
+ "x",
+ "£27,019",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,887",
+ "x",
+ "£23,916",
+ "£25,998",
+ "x",
+ "x",
+ "£25,592",
+ "£24,212"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,057",
+ "x",
+ "x",
+ "x",
+ "£26,473"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,713",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,074",
+ "x",
+ "x",
+ "£25,450",
+ "£23,600",
+ "x",
+ "x",
+ "x",
+ "£24,434"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Educational support activities",
+ "Other education",
+ "Pre-primary education",
+ "Primary education",
+ "Higher education",
+ "Secondary education"
+ ],
+ "White": [
+ 23800,
+ 26071,
+ 25571,
+ 25580,
+ 24827,
+ 24845
+ ],
+ "Black": [
+ "NA",
+ 24867,
+ 22930,
+ 24565,
+ 25540,
+ 27712
+ ],
+ "Asian": [
+ 25047,
+ 27615,
+ 25825,
+ 25885,
+ 24498,
+ 26294
+ ],
+ "Mixed": [
+ 25659,
+ "NA",
+ "NA",
+ 24332,
+ 25006,
+ 25798
+ ],
+ "Other": [
+ 26586,
+ "NA",
+ "NA",
+ 24307,
+ "NA",
+ 25095
+ ],
+ "Not known": [
+ "NA",
+ 25035,
+ "NA",
+ 24280,
+ 23917,
+ 24817
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,800",
+ "£26,071",
+ "£25,571",
+ "£25,580",
+ "£24,827",
+ "£24,845"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,867",
+ "£22,930",
+ "£24,565",
+ "£25,540",
+ "£27,712"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,047",
+ "£27,615",
+ "£25,825",
+ "£25,885",
+ "£24,498",
+ "£26,294"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,659",
+ "x",
+ "x",
+ "£24,332",
+ "£25,006",
+ "£25,798"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£26,586",
+ "x",
+ "x",
+ "£24,307",
+ "x",
+ "£25,095"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,035",
+ "x",
+ "£24,280",
+ "£23,917",
+ "£24,817"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel"
+ ],
+ "White": [
+ 23099
+ ],
+ "Black": [
+ 24952
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ 25401
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,099"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,952"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,401"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Organisation of conventions and trade shows",
+ "Other human resources provision",
+ "Combined facilities support activities",
+ "Temporary employment agency activities",
+ "Business support service activities n.e.c.",
+ "Travel agency and tour operator activities",
+ "Activities of employment placement agencies",
+ "Activities of call centres",
+ "Private security activities",
+ "Renting and leasing of personal and household goods",
+ "Renting and leasing of motor vehicles",
+ "Cleaning activities",
+ "Office administrative and support activities"
+ ],
+ "White": [
+ 24260,
+ 25305,
+ 24373,
+ 24236,
+ 26160,
+ 23365,
+ 25215,
+ 25643,
+ 24667,
+ 24088,
+ 23428,
+ 24353,
+ 23749,
+ 22966
+ ],
+ "Black": [
+ "NA",
+ 25924,
+ 23138,
+ 26262,
+ 25115,
+ 25744,
+ "NA",
+ 26462,
+ 26205,
+ 25314,
+ "NA",
+ "NA",
+ 26219,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 23948,
+ 24684,
+ 24358,
+ 26355,
+ 25381,
+ "NA",
+ 23872,
+ 25075,
+ 23592,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ 26333,
+ "NA",
+ "NA",
+ "NA",
+ 27288,
+ 25692,
+ "NA",
+ 24557,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ 25824,
+ 25677,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25697
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24888,
+ 25246,
+ "NA",
+ 24906,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24799,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,260",
+ "£25,305",
+ "£24,373",
+ "£24,236",
+ "£26,160",
+ "£23,365",
+ "£25,215",
+ "£25,643",
+ "£24,667",
+ "£24,088",
+ "£23,428",
+ "£24,353",
+ "£23,749",
+ "£22,966"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,924",
+ "£23,138",
+ "£26,262",
+ "£25,115",
+ "£25,744",
+ "x",
+ "£26,462",
+ "£26,205",
+ "£25,314",
+ "x",
+ "x",
+ "£26,219",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,948",
+ "£24,684",
+ "£24,358",
+ "£26,355",
+ "£25,381",
+ "x",
+ "£23,872",
+ "£25,075",
+ "£23,592",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,333",
+ "x",
+ "x",
+ "x",
+ "£27,288",
+ "£25,692",
+ "x",
+ "£24,557",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£25,824",
+ "£25,677",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,697"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,888",
+ "£25,246",
+ "x",
+ "£24,906",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,799",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 25729
+ ],
+ "Black": [
+ 23476
+ ],
+ "Asian": [
+ 24904
+ ],
+ "Mixed": [
+ 25270
+ ],
+ "Other": [
+ 24588
+ ],
+ "Not known": [
+ 25767
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,729"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£23,476"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,904"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,270"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,588"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,767"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,100",
+ "£26,200",
+ "£26,300",
+ "£22,800",
+ "£24,800",
+ "£24,500",
+ "£24,400",
+ "£23,900",
+ "£25,700",
+ "£24,800",
+ "£23,400",
+ "£25,800",
+ "£22,700",
+ "x",
+ "£25,900",
+ "£23,100",
+ "£24,400",
+ "£26,000",
+ "£23,700",
+ "£24,500",
+ "£24,600"
+ ],
+ "footer": "29,085",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,500",
+ "£25,900",
+ "£23,600",
+ "£24,800",
+ "£25,100",
+ "£25,400",
+ "£24,300",
+ "£25,000",
+ "x",
+ "£24,600",
+ "x",
+ "£25,600",
+ "£25,100",
+ "x",
+ "£24,100",
+ "£23,700",
+ "£25,100",
+ "£25,500",
+ "£23,900",
+ "£24,200",
+ "£24,500"
+ ],
+ "footer": "22,120",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,600",
+ "x",
+ "£23,800",
+ "£24,500",
+ "£24,800",
+ "£25,200",
+ "£24,800",
+ "£22,800",
+ "x",
+ "£24,600",
+ "x",
+ "£25,200",
+ "£24,300",
+ "x",
+ "£25,600",
+ "£24,800",
+ "£24,600",
+ "£25,000",
+ "x",
+ "£24,200",
+ "£24,500"
+ ],
+ "footer": "23,090",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,700",
+ "x",
+ "£24,400",
+ "£23,900",
+ "£26,000",
+ "£26,000",
+ "£25,200",
+ "£24,600",
+ "x",
+ "£27,900",
+ "x",
+ "£26,000",
+ "£27,100",
+ "x",
+ "£26,500",
+ "x",
+ "£25,300",
+ "£27,000",
+ "£25,100",
+ "£26,900",
+ "£26,500"
+ ],
+ "footer": "14,410",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,400",
+ "x",
+ "£24,200",
+ "£23,100",
+ "£25,300",
+ "£25,300",
+ "£25,500",
+ "£25,500",
+ "x",
+ "£25,600",
+ "x",
+ "x",
+ "£23,200",
+ "x",
+ "x",
+ "£26,400",
+ "£24,800",
+ "£23,100",
+ "x",
+ "£23,600",
+ "£25,400"
+ ],
+ "footer": "16,705",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£23,300",
+ "x",
+ "£24,400",
+ "£25,900",
+ "£24,400",
+ "£25,400",
+ "£25,000",
+ "£24,800",
+ "x",
+ "x",
+ "£24,300",
+ "£25,000",
+ "£23,700",
+ "£25,300",
+ "£24,800",
+ "x",
+ "£26,800",
+ "£25,200",
+ "x",
+ "£25,200",
+ "£25,200"
+ ],
+ "footer": "19,960",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27900\n var min = 22700\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style",
+ "tag.attribs.columns.6.style",
+ "tag.attribs.columns.7.style",
+ "tag.attribs.columns.8.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of Allied health, 1 years after graduation, Construction <\/b> was the most common industry for and White ethnicity graduates,\n Wholesale and retail trade - repair of motor vehicles and motorcycles <\/b> was the most common industry for and Black ethnicity graduates, Other service activities <\/b> was the most common industry for and Asian ethnicity graduates, Administrative and support service activities <\/b> was the most common industry for and Mixed ethnicity graduates, Human health and social work activities <\/b> was the most common industry for and Other ethnicity graduates, and Public administration and defence - compulsory social security <\/b> was the most common industry for and Not known ethnicity graduates.
The industry with the largest range in proportions was Administrative and support service activities<\/b>\n where Mixed ethnicity graduates had the highest proportion and Black\n ethnicity graduates had the lowest proportion.The industry with the largest range in median earnings was Arts, entertainment and recreation<\/b>\n where Mixed ethnicity graduates the highest median earnings (£27,100<\/b>) and White ethnicity graduates had the lowest median earnings (£22,700<\/b>).The group with the highest median earnings was Mixed<\/b> ethnicity graduates in\n the Other service activities<\/b> industry (median earnings of £27,900<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of Allied health by ethnicity, one year after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_7.json b/tests/shinytest/testUI-current/subjectByIndustry_7.json
new file mode 100644
index 0000000..2cc57fc
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_7.json
@@ -0,0 +1,5904 @@
+{
+ "input": {
+ "countinput2": "ethnicity",
+ "crosstabs.subjectinput": "English studies",
+ "earningsbutton": "Median earnings",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "1"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Administrative and support service activities",
+ "Real estate activities",
+ "Public administration and defence - compulsory social security",
+ "Accommodation and food service activities",
+ "Professional, scientific and technical activities",
+ "Information and communication",
+ "Agriculture, forestry and fishing",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Construction",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Electricity, gas, steam and air conditioning supply",
+ "Human health and social work activities",
+ "Transportation and storage",
+ "Mining and quarrying",
+ "Activities of extraterritorial organisations and bodies",
+ "Manufacturing",
+ "Financial and insurance activities",
+ "Other service activities",
+ "Education",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "White": [
+ 26900,
+ 25800,
+ 24600,
+ 25300,
+ 24900,
+ 25100,
+ 25300,
+ 23200,
+ 26100,
+ 25600,
+ 25200,
+ 24000,
+ 23600,
+ 25300,
+ 23900,
+ 24400,
+ 25200,
+ 23000,
+ 24100,
+ 24800,
+ 25300,
+ 24200
+ ],
+ "Black": [
+ 25300,
+ 24400,
+ 25600,
+ 24600,
+ 24700,
+ 23500,
+ 26100,
+ "NA",
+ "NA",
+ 25100,
+ 24300,
+ "NA",
+ "NA",
+ 25300,
+ 25600,
+ "NA",
+ "NA",
+ 25900,
+ 25200,
+ 25900,
+ 23500,
+ 24700
+ ],
+ "Asian": [
+ 24400,
+ 26500,
+ 23600,
+ 24100,
+ 23700,
+ 24300,
+ 23000,
+ "NA",
+ "NA",
+ 24000,
+ 25200,
+ "NA",
+ 24800,
+ 24800,
+ 25300,
+ "NA",
+ "NA",
+ 24700,
+ 26100,
+ 25300,
+ 25400,
+ 23000
+ ],
+ "Mixed": [
+ 24900,
+ 26400,
+ 25300,
+ 25600,
+ 24800,
+ 25700,
+ 24400,
+ "NA",
+ "NA",
+ 25500,
+ 25300,
+ "NA",
+ "NA",
+ 25700,
+ 24000,
+ "NA",
+ "NA",
+ 24100,
+ 25300,
+ 25700,
+ 27300,
+ 25600
+ ],
+ "Other": [
+ "NA",
+ 26900,
+ 23600,
+ 24600,
+ 24700,
+ 25600,
+ 24200,
+ "NA",
+ "NA",
+ 27100,
+ 26400,
+ "NA",
+ "NA",
+ 25500,
+ "NA",
+ "NA",
+ "NA",
+ 25700,
+ 25600,
+ 26100,
+ 23700,
+ 25000
+ ],
+ "Not known": [
+ 26300,
+ 24600,
+ 25100,
+ 23000,
+ 23200,
+ 25200,
+ 25200,
+ "NA",
+ "NA",
+ 24600,
+ 24400,
+ "NA",
+ 24400,
+ 24700,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25500,
+ 24900,
+ 24400,
+ 25500
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Gambling and betting activities",
+ "Amusement and recreation activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Sports activities",
+ "Creative; arts and entertainment activities"
+ ],
+ "White": [
+ 24554,
+ 23311,
+ 25879,
+ 24310,
+ 24277
+ ],
+ "Black": [
+ "NA",
+ 25197,
+ 25908,
+ "NA",
+ 27268
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ 24905,
+ 23498
+ ],
+ "Mixed": [
+ "NA",
+ 24851,
+ 24155,
+ 26495,
+ 24807
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24725,
+ "NA",
+ 24574,
+ 23825
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,554",
+ "£23,311",
+ "£25,879",
+ "£24,310",
+ "£24,277"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,197",
+ "£25,908",
+ "x",
+ "£27,268"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£24,905",
+ "£23,498"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,851",
+ "£24,155",
+ "£26,495",
+ "£24,807"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,725",
+ "x",
+ "£24,574",
+ "£23,825"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Other reservation service and related activities",
+ "Temporary employment agency activities",
+ "Leasing of intellectual property and similar products; except copyrighted works",
+ "Cleaning activities",
+ "Investigation activities",
+ "Renting and leasing of motor vehicles",
+ "Travel agency and tour operator activities",
+ "Landscape service activities",
+ "Combined facilities support activities",
+ "Organisation of conventions and trade shows",
+ "Activities of employment placement agencies",
+ "Renting and leasing of personal and household goods",
+ "Other human resources provision",
+ "Office administrative and support activities",
+ "Private security activities",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Activities of call centres",
+ "Business support service activities n.e.c."
+ ],
+ "White": [
+ 23882,
+ 23743,
+ 25916,
+ 25514,
+ 23469,
+ 24467,
+ 24056,
+ 25643,
+ 25624,
+ 26169,
+ 25121,
+ 25864,
+ 25302,
+ 25306,
+ 25695,
+ 26554,
+ 24715,
+ 23631
+ ],
+ "Black": [
+ "NA",
+ 25601,
+ "NA",
+ 24298,
+ "NA",
+ 24417,
+ 26559,
+ "NA",
+ "NA",
+ "NA",
+ 25088,
+ "NA",
+ "NA",
+ 23576,
+ "NA",
+ "NA",
+ 24406,
+ 25704
+ ],
+ "Asian": [
+ "NA",
+ 24359,
+ "NA",
+ 24583,
+ "NA",
+ 25835,
+ "NA",
+ "NA",
+ "NA",
+ 26091,
+ 26225,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24596,
+ 27234
+ ],
+ "Mixed": [
+ 24727,
+ 24219,
+ "NA",
+ "NA",
+ "NA",
+ 25211,
+ 24814,
+ "NA",
+ 25521,
+ "NA",
+ 24952,
+ "NA",
+ 25257,
+ "NA",
+ 27046,
+ "NA",
+ "NA",
+ 25676
+ ],
+ "Other": [
+ "NA",
+ 24588,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25819,
+ "NA",
+ "NA",
+ 25801,
+ "NA",
+ "NA",
+ 25048,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 24962,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26248,
+ "NA",
+ "NA",
+ "NA",
+ 26069,
+ "NA",
+ 24466,
+ 24451
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,882",
+ "£23,743",
+ "£25,916",
+ "£25,514",
+ "£23,469",
+ "£24,467",
+ "£24,056",
+ "£25,643",
+ "£25,624",
+ "£26,169",
+ "£25,121",
+ "£25,864",
+ "£25,302",
+ "£25,306",
+ "£25,695",
+ "£26,554",
+ "£24,715",
+ "£23,631"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,601",
+ "x",
+ "£24,298",
+ "x",
+ "£24,417",
+ "£26,559",
+ "x",
+ "x",
+ "x",
+ "£25,088",
+ "x",
+ "x",
+ "£23,576",
+ "x",
+ "x",
+ "£24,406",
+ "£25,704"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,359",
+ "x",
+ "£24,583",
+ "x",
+ "£25,835",
+ "x",
+ "x",
+ "x",
+ "£26,091",
+ "£26,225",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,596",
+ "£27,234"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,727",
+ "£24,219",
+ "x",
+ "x",
+ "x",
+ "£25,211",
+ "£24,814",
+ "x",
+ "£25,521",
+ "x",
+ "£24,952",
+ "x",
+ "£25,257",
+ "x",
+ "£27,046",
+ "x",
+ "x",
+ "£25,676"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,588",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,819",
+ "x",
+ "x",
+ "£25,801",
+ "x",
+ "x",
+ "£25,048",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,962",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,248",
+ "x",
+ "x",
+ "x",
+ "£26,069",
+ "x",
+ "£24,466",
+ "£24,451"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Real estate activities on a fee or contract basis",
+ "Renting and operating of own or leased real estate"
+ ],
+ "White": [
+ 24769,
+ 27315
+ ],
+ "Black": [
+ 25241,
+ "NA"
+ ],
+ "Asian": [
+ 25029,
+ 23017
+ ],
+ "Mixed": [
+ 25385,
+ 24897
+ ],
+ "Other": [
+ 25735,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 25475
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,769",
+ "£27,315"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,241",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,029",
+ "£23,017"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,385",
+ "£24,897"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£25,735",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,475"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Compulsory social security activities",
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole"
+ ],
+ "White": [
+ 26146,
+ 23847,
+ 24714
+ ],
+ "Black": [
+ "NA",
+ 25419,
+ "NA"
+ ],
+ "Asian": [
+ 25482,
+ 26031,
+ 23730
+ ],
+ "Mixed": [
+ "NA",
+ 26796,
+ 24369
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 24245
+ ],
+ "Not known": [
+ "NA",
+ 24632,
+ 24228
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,146",
+ "£23,847",
+ "£24,714"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,419",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,482",
+ "£26,031",
+ "£23,730"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£26,796",
+ "£24,369"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,245"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,632",
+ "£24,228"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Beverage serving activities",
+ "Holiday and other short-stay accommodation",
+ "Hotels and similar accommodation",
+ "Event catering and other food service activities",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Other accommodation",
+ "Restaurants and mobile food service activities"
+ ],
+ "White": [
+ 25348,
+ 24919,
+ 25727,
+ 26084,
+ 25213,
+ 25994,
+ 23831
+ ],
+ "Black": [
+ 25286,
+ "NA",
+ 24056,
+ "NA",
+ "NA",
+ 25143,
+ 24803
+ ],
+ "Asian": [
+ 26583,
+ "NA",
+ 24585,
+ "NA",
+ "NA",
+ "NA",
+ 24636
+ ],
+ "Mixed": [
+ 23132,
+ "NA",
+ 25050,
+ 26813,
+ "NA",
+ 25561,
+ 24376
+ ],
+ "Other": [
+ 23515,
+ "NA",
+ 22929,
+ 27045,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 23133,
+ "NA",
+ 24317,
+ "NA",
+ 23934,
+ "NA",
+ 25220
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,348",
+ "£24,919",
+ "£25,727",
+ "£26,084",
+ "£25,213",
+ "£25,994",
+ "£23,831"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,286",
+ "x",
+ "£24,056",
+ "x",
+ "x",
+ "£25,143",
+ "£24,803"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£26,583",
+ "x",
+ "£24,585",
+ "x",
+ "x",
+ "x",
+ "£24,636"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£23,132",
+ "x",
+ "£25,050",
+ "£26,813",
+ "x",
+ "£25,561",
+ "£24,376"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,515",
+ "x",
+ "£22,929",
+ "£27,045",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£23,133",
+ "x",
+ "£24,317",
+ "x",
+ "£23,934",
+ "x",
+ "£25,220"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Market research and public opinion polling",
+ "Research and experimental development on natural sciences and engineering",
+ "Architectural and engineering activities and related technical consultancy",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Management consultancy activities",
+ "Advertising",
+ "Activities of head offices",
+ "Technical testing and analysis",
+ "Photographic activities",
+ "Specialised design activities",
+ "Veterinary activities",
+ "Translation and interpretation activities",
+ "Research and experimental development on social sciences and humanities",
+ "Legal activities"
+ ],
+ "White": [
+ 24235,
+ 24437,
+ 24385,
+ 27063,
+ 23494,
+ 25084,
+ 26013,
+ 24530,
+ 24126,
+ 24391,
+ 26958,
+ 26341,
+ 24862,
+ 26303,
+ 25710
+ ],
+ "Black": [
+ "NA",
+ 25824,
+ 23979,
+ 22748,
+ 24619,
+ 25523,
+ 26625,
+ 26348,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23947
+ ],
+ "Asian": [
+ 24444,
+ "NA",
+ 26531,
+ 25721,
+ 25584,
+ 26175,
+ 24165,
+ "NA",
+ 24347,
+ 25161,
+ 24560,
+ 24896,
+ "NA",
+ "NA",
+ 25391
+ ],
+ "Mixed": [
+ 26251,
+ "NA",
+ 26337,
+ 24057,
+ 24265,
+ 26002,
+ 25309,
+ 25068,
+ "NA",
+ "NA",
+ 25986,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ 23418,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 24923,
+ "NA",
+ 24954,
+ 26778,
+ 25951,
+ 24659,
+ 24810,
+ 23188,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24751
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,235",
+ "£24,437",
+ "£24,385",
+ "£27,063",
+ "£23,494",
+ "£25,084",
+ "£26,013",
+ "£24,530",
+ "£24,126",
+ "£24,391",
+ "£26,958",
+ "£26,341",
+ "£24,862",
+ "£26,303",
+ "£25,710"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,824",
+ "£23,979",
+ "£22,748",
+ "£24,619",
+ "£25,523",
+ "£26,625",
+ "£26,348",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,947"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,444",
+ "x",
+ "£26,531",
+ "£25,721",
+ "£25,584",
+ "£26,175",
+ "£24,165",
+ "x",
+ "£24,347",
+ "£25,161",
+ "£24,560",
+ "£24,896",
+ "x",
+ "x",
+ "£25,391"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£26,251",
+ "x",
+ "£26,337",
+ "£24,057",
+ "£24,265",
+ "£26,002",
+ "£25,309",
+ "£25,068",
+ "x",
+ "x",
+ "£25,986",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "£23,418",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,923",
+ "x",
+ "£24,954",
+ "£26,778",
+ "£25,951",
+ "£24,659",
+ "£24,810",
+ "£23,188",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,751"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Other telecommunications activities",
+ "Publishing of books; periodicals and other publishing activities",
+ "Data processing; hosting and related activities; web portals",
+ "Motion picture; video and television programme activities",
+ "Television programming and broadcasting activities",
+ "Other information service activities",
+ "Software publishing",
+ "Wireless telecommunications activities",
+ "Sound recording and music publishing activities",
+ "Satellite telecommunications activities",
+ "Computer programming; consultancy and related activities",
+ "Wired telecommunications activities",
+ "Radio broadcasting"
+ ],
+ "White": [
+ 24221,
+ 24110,
+ 25846,
+ 23761,
+ 25336,
+ 25223,
+ 23984,
+ 25232,
+ 23524,
+ 26506,
+ 26333,
+ "NA",
+ 23294
+ ],
+ "Black": [
+ 25167,
+ 25837,
+ 25443,
+ 24292,
+ 25919,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25107,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 25450,
+ 26111,
+ 24405,
+ 24526,
+ 23994,
+ "NA",
+ "NA",
+ 23039,
+ "NA",
+ "NA",
+ 23280,
+ 25311,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ 25217,
+ 25502,
+ 26961,
+ 24915,
+ "NA",
+ "NA",
+ "NA",
+ 23561,
+ "NA",
+ 25183,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ 23972,
+ 23737,
+ 26370,
+ 24475,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24817,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 23263,
+ "NA",
+ 23819,
+ 23282,
+ "NA",
+ "NA",
+ 26137,
+ "NA",
+ "NA",
+ 24720,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,221",
+ "£24,110",
+ "£25,846",
+ "£23,761",
+ "£25,336",
+ "£25,223",
+ "£23,984",
+ "£25,232",
+ "£23,524",
+ "£26,506",
+ "£26,333",
+ "x",
+ "£23,294"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,167",
+ "£25,837",
+ "£25,443",
+ "£24,292",
+ "£25,919",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,107",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,450",
+ "£26,111",
+ "£24,405",
+ "£24,526",
+ "£23,994",
+ "x",
+ "x",
+ "£23,039",
+ "x",
+ "x",
+ "£23,280",
+ "£25,311",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£25,217",
+ "£25,502",
+ "£26,961",
+ "£24,915",
+ "x",
+ "x",
+ "x",
+ "£23,561",
+ "x",
+ "£25,183",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,972",
+ "£23,737",
+ "£26,370",
+ "£24,475",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,817",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£23,263",
+ "x",
+ "£23,819",
+ "£23,282",
+ "x",
+ "x",
+ "£26,137",
+ "x",
+ "x",
+ "£24,720",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Not known"
+ ],
+ "White": [
+ 24990,
+ 24872
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,990",
+ "£24,872"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel"
+ ],
+ "White": [
+ 26363
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,363"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Wholesale of other machinery; equipment and supplies",
+ "Maintenance and repair of motor vehicles",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Retail sale of other household equipment in specialised stores",
+ "Wholesale on a fee or contract basis",
+ "Retail sale in non-specialised stores",
+ "Retail sale of automotive fuel in specialised stores",
+ "Non-specialised wholesale trade",
+ "Retail trade not in stores; stalls or markets",
+ "Wholesale of agricultural raw materials and live animals",
+ "Other specialised wholesale",
+ "Wholesale of household goods",
+ "Wholesale of food; beverages and tobacco",
+ "Sale of motor vehicles",
+ "Retail sale of other goods in specialised stores",
+ "Wholesale of information and communication equipment",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Sale of motor vehicle parts and accessories"
+ ],
+ "White": [
+ 25418,
+ 24813,
+ 24612,
+ 24763,
+ 25528,
+ 25425,
+ 23833,
+ 24033,
+ 25833,
+ 25206,
+ 26002,
+ 25126,
+ 27606,
+ 26663,
+ 24602,
+ 24300,
+ 23948,
+ 24294,
+ 26199
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 24967,
+ "NA",
+ 24673,
+ 26376,
+ 23363,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25073,
+ "NA",
+ 25019,
+ 24831,
+ "NA",
+ 25494,
+ "NA"
+ ],
+ "Asian": [
+ 25291,
+ "NA",
+ 25941,
+ 24696,
+ 25023,
+ "NA",
+ 23755,
+ 24241,
+ 24954,
+ 25429,
+ "NA",
+ 26104,
+ 24408,
+ 23387,
+ "NA",
+ 25248,
+ 27077,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 24293,
+ 25100,
+ 24721,
+ "NA",
+ 25888,
+ "NA",
+ "NA",
+ 24041,
+ "NA",
+ "NA",
+ 28307,
+ 25905,
+ "NA",
+ 23940,
+ 25745,
+ 24169,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24090,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 22954,
+ 25620,
+ "NA",
+ 25450,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23860,
+ "NA",
+ "NA",
+ 25125,
+ "NA",
+ "NA",
+ 25777,
+ "NA",
+ "NA",
+ 24354,
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,418",
+ "£24,813",
+ "£24,612",
+ "£24,763",
+ "£25,528",
+ "£25,425",
+ "£23,833",
+ "£24,033",
+ "£25,833",
+ "£25,206",
+ "£26,002",
+ "£25,126",
+ "£27,606",
+ "£26,663",
+ "£24,602",
+ "£24,300",
+ "£23,948",
+ "£24,294",
+ "£26,199"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,967",
+ "x",
+ "£24,673",
+ "£26,376",
+ "£23,363",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,073",
+ "x",
+ "£25,019",
+ "£24,831",
+ "x",
+ "£25,494",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,291",
+ "x",
+ "£25,941",
+ "£24,696",
+ "£25,023",
+ "x",
+ "£23,755",
+ "£24,241",
+ "£24,954",
+ "£25,429",
+ "x",
+ "£26,104",
+ "£24,408",
+ "£23,387",
+ "x",
+ "£25,248",
+ "£27,077",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£24,293",
+ "£25,100",
+ "£24,721",
+ "x",
+ "£25,888",
+ "x",
+ "x",
+ "£24,041",
+ "x",
+ "x",
+ "£28,307",
+ "£25,905",
+ "x",
+ "£23,940",
+ "£25,745",
+ "£24,169",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,090",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£22,954",
+ "£25,620",
+ "x",
+ "£25,450",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,860",
+ "x",
+ "x",
+ "£25,125",
+ "x",
+ "x",
+ "£25,777",
+ "x",
+ "x",
+ "£24,354",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Demolition and site preparation",
+ "Development of building projects",
+ "Building completion and finishing",
+ "Construction of roads and railways",
+ "Construction of other civil engineering projects",
+ "Construction of utility projects",
+ "Other specialised construction activities",
+ "Electrical; plumbing and other construction installation activities",
+ "Construction of residential and non-residential buildings"
+ ],
+ "White": [
+ 25546,
+ 25618,
+ 23638,
+ 24322,
+ 24899,
+ 24565,
+ 25266,
+ 22915,
+ 24688
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 25254,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23613,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26343,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26007
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24972,
+ "NA",
+ "NA",
+ "NA",
+ 22213
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,546",
+ "£25,618",
+ "£23,638",
+ "£24,322",
+ "£24,899",
+ "£24,565",
+ "£25,266",
+ "£22,915",
+ "£24,688"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,254",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,613",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,343",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,007"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,972",
+ "x",
+ "x",
+ "x",
+ "£22,213"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Water collection; treatment and supply",
+ "Waste collection"
+ ],
+ "White": [
+ 23745,
+ 26005
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,745",
+ "£26,005"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Manufacture of gas; distribution of gaseous fuels through mains"
+ ],
+ "White": [
+ 25598,
+ 24208
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 23335,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 24561,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,598",
+ "£24,208"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£23,335",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,561",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Residential nursing care activities",
+ "Other social work activities without accommodation",
+ "Hospital activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Other residential care activities",
+ "Other human health activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Residential care activities for the elderly and disabled",
+ "Medical and dental practice activities"
+ ],
+ "White": [
+ 24577,
+ 23681,
+ 24523,
+ 24912,
+ 24465,
+ 25270,
+ 25066,
+ 24446,
+ 25936
+ ],
+ "Black": [
+ 25016,
+ 23822,
+ 24372,
+ "NA",
+ 23594,
+ 25696,
+ 24831,
+ 24791,
+ "NA"
+ ],
+ "Asian": [
+ 27706,
+ 24439,
+ 24286,
+ 25612,
+ 25224,
+ 27809,
+ 23841,
+ 23863,
+ 23991
+ ],
+ "Mixed": [
+ "NA",
+ 24145,
+ 24504,
+ "NA",
+ 23563,
+ 25458,
+ 24905,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 24477,
+ 23554,
+ "NA",
+ "NA",
+ 25213,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25193,
+ "NA",
+ "NA",
+ 23683,
+ 25368,
+ "NA",
+ 26456,
+ 25030,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,577",
+ "£23,681",
+ "£24,523",
+ "£24,912",
+ "£24,465",
+ "£25,270",
+ "£25,066",
+ "£24,446",
+ "£25,936"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,016",
+ "£23,822",
+ "£24,372",
+ "x",
+ "£23,594",
+ "£25,696",
+ "£24,831",
+ "£24,791",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£27,706",
+ "£24,439",
+ "£24,286",
+ "£25,612",
+ "£25,224",
+ "£27,809",
+ "£23,841",
+ "£23,863",
+ "£23,991"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,145",
+ "£24,504",
+ "x",
+ "£23,563",
+ "£25,458",
+ "£24,905",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,477",
+ "£23,554",
+ "x",
+ "x",
+ "£25,213",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,193",
+ "x",
+ "x",
+ "£23,683",
+ "£25,368",
+ "x",
+ "£26,456",
+ "£25,030",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Sea and coastal passenger water transport",
+ "Transport via pipeline",
+ "Freight transport by road and removal services",
+ "Passenger rail transport; interurban",
+ "Other postal and courier activities",
+ "Freight air transport and space transport",
+ "Sea and coastal freight water transport",
+ "Passenger air transport",
+ "Postal activities under universal service obligation",
+ "Other passenger land transport",
+ "Warehousing and storage",
+ "Support activities for transportation",
+ "Inland passenger water transport"
+ ],
+ "White": [
+ 24758,
+ 26366,
+ 23741,
+ 24835,
+ 24852,
+ 25098,
+ 24316,
+ 25010,
+ 25399,
+ 25034,
+ 24953,
+ 25383,
+ 25617
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25409,
+ "NA",
+ 26599,
+ "NA",
+ 23570,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ 25506,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23883,
+ "NA",
+ 25930,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26294,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25703,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,758",
+ "£26,366",
+ "£23,741",
+ "£24,835",
+ "£24,852",
+ "£25,098",
+ "£24,316",
+ "£25,010",
+ "£25,399",
+ "£25,034",
+ "£24,953",
+ "£25,383",
+ "£25,617"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,409",
+ "x",
+ "£26,599",
+ "x",
+ "£23,570",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,506",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,883",
+ "x",
+ "£25,930",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,294",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,703",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying",
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Combined facilities support activities",
+ "Cleaning activities"
+ ],
+ "White": [
+ 24822,
+ 24393
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,822",
+ "£24,393"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "group_name": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "White": [
+ 25477
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,477"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of other food products",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of other chemical products",
+ "Finishing of textiles",
+ "Manufacture of prepared animal feeds",
+ "Tanning and dressing of leather; manufacture of luggage; handbags; saddlery and harness; dressing and dyeing of fur",
+ "Manufacture of other porcelain and ceramic products",
+ "Manufacture of agricultural and forestry machinery",
+ "Manufacture of clay building materials",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Manufacture of domestic appliances",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Printing and service activities related to printing",
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of structural metal products",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of footwear",
+ "Manufacture of other textiles",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of glass and glass products",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of bakery and farinaceous products",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacturing n.e.c.",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Reproduction of recorded media",
+ "Manufacture of sports goods",
+ "Building of ships and boats",
+ "Manufacture of motor vehicles",
+ "Manufacture of refined petroleum products",
+ "Casting of metals",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of furniture",
+ "Weaving of textiles",
+ "Manufacture of parts and accessories for motor vehicles",
+ "Manufacture of plastics products",
+ "Treatment and coating of metals; machining",
+ "Installation of industrial machinery and equipment",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of consumer electronics",
+ "Manufacture of other electrical equipment",
+ "Manufacture of wearing apparel; except fur apparel",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Manufacture of beverages"
+ ],
+ "White": [
+ 25386,
+ 25608,
+ 24224,
+ 25702,
+ 23893,
+ 24897,
+ 24484,
+ 24674,
+ "NA",
+ 24949,
+ 25133,
+ 24840,
+ 24036,
+ 25560,
+ 26004,
+ 23481,
+ 24877,
+ 25993,
+ 24481,
+ 24823,
+ 24741,
+ 22317,
+ 26449,
+ 24446,
+ 26231,
+ 23726,
+ 23811,
+ 24375,
+ 24295,
+ 25890,
+ 25370,
+ 25439,
+ 26105,
+ 23783,
+ 25324,
+ 24258,
+ 24405,
+ 25842,
+ 24261,
+ 24172,
+ 25519,
+ 26145,
+ 26537,
+ 25176,
+ 26091,
+ 23421,
+ 26680,
+ 25466,
+ 24608,
+ 26847,
+ 26185,
+ 25704
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25623,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 23993,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24889,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26113,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24302,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 24717,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25938,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25178,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25611,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 26852,
+ "NA",
+ 23635,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25679,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25158,
+ "NA",
+ 24772
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 25053,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£25,386",
+ "£25,608",
+ "£24,224",
+ "£25,702",
+ "£23,893",
+ "£24,897",
+ "£24,484",
+ "£24,674",
+ "x",
+ "£24,949",
+ "£25,133",
+ "£24,840",
+ "£24,036",
+ "£25,560",
+ "£26,004",
+ "£23,481",
+ "£24,877",
+ "£25,993",
+ "£24,481",
+ "£24,823",
+ "£24,741",
+ "£22,317",
+ "£26,449",
+ "£24,446",
+ "£26,231",
+ "£23,726",
+ "£23,811",
+ "£24,375",
+ "£24,295",
+ "£25,890",
+ "£25,370",
+ "£25,439",
+ "£26,105",
+ "£23,783",
+ "£25,324",
+ "£24,258",
+ "£24,405",
+ "£25,842",
+ "£24,261",
+ "£24,172",
+ "£25,519",
+ "£26,145",
+ "£26,537",
+ "£25,176",
+ "£26,091",
+ "£23,421",
+ "£26,680",
+ "£25,466",
+ "£24,608",
+ "£26,847",
+ "£26,185",
+ "£25,704"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,623",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£23,993",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,889",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,113",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,302",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£24,717",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,938",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,178",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,611",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£26,852",
+ "x",
+ "£23,635",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,679",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,158",
+ "x",
+ "£24,772"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,053",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Pension funding",
+ "Reinsurance",
+ "Activities auxiliary to insurance and pension funding",
+ "Monetary intermediation",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Other financial service activities; except insurance and pension funding",
+ "Fund management activities",
+ "Insurance",
+ "Trusts; funds and similar financial entities",
+ "Activities of holding companies"
+ ],
+ "White": [
+ 24658,
+ 23916,
+ 24728,
+ 25941,
+ 24717,
+ 23998,
+ 24731,
+ 24958,
+ "NA",
+ 24453
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 25441,
+ 26391,
+ 24350,
+ 25087,
+ 25567,
+ 24090,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 24086,
+ "NA",
+ 24051,
+ 23294,
+ 23395,
+ 24957,
+ 24199,
+ 25887,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 25635,
+ 23834,
+ 25213,
+ 25492,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 25967,
+ 25650,
+ "NA",
+ 25993,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 25472,
+ 24591,
+ 23422,
+ 26037,
+ "NA",
+ "NA",
+ 25610,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£24,658",
+ "£23,916",
+ "£24,728",
+ "£25,941",
+ "£24,717",
+ "£23,998",
+ "£24,731",
+ "£24,958",
+ "x",
+ "£24,453"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,441",
+ "£26,391",
+ "£24,350",
+ "£25,087",
+ "£25,567",
+ "£24,090",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£24,086",
+ "x",
+ "£24,051",
+ "£23,294",
+ "£23,395",
+ "£24,957",
+ "£24,199",
+ "£25,887",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,635",
+ "£23,834",
+ "£25,213",
+ "£25,492",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,967",
+ "£25,650",
+ "x",
+ "£25,993",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "£25,472",
+ "£24,591",
+ "£23,422",
+ "£26,037",
+ "x",
+ "x",
+ "£25,610",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Other personal service activities",
+ "Activities of business; employers and professional membership organisations",
+ "Activities of other membership organisations",
+ "Activities of trade unions",
+ "Repair of computers and communication equipment",
+ "Repair of personal and household goods"
+ ],
+ "White": [
+ 23570,
+ 25149,
+ 26770,
+ 24171,
+ 24020,
+ 26750
+ ],
+ "Black": [
+ 24697,
+ 25504,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 24645,
+ 25222,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ 25475,
+ "NA",
+ 24810,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ 24644,
+ "NA",
+ 25609,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 25233,
+ 23612,
+ 25930,
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,570",
+ "£25,149",
+ "£26,770",
+ "£24,171",
+ "£24,020",
+ "£26,750"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£24,697",
+ "£25,504",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "£24,645",
+ "£25,222",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£25,475",
+ "x",
+ "£24,810",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£24,644",
+ "x",
+ "£25,609",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£25,233",
+ "£23,612",
+ "£25,930",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Other education",
+ "Pre-primary education",
+ "Educational support activities",
+ "Higher education",
+ "Primary education",
+ "Secondary education"
+ ],
+ "White": [
+ 23623,
+ 25707,
+ 24889,
+ 23967,
+ 24502,
+ 25950
+ ],
+ "Black": [
+ 25797,
+ "NA",
+ 23497,
+ 24594,
+ 25657,
+ 24217
+ ],
+ "Asian": [
+ 25462,
+ 24859,
+ 24263,
+ 23957,
+ 24951,
+ 25075
+ ],
+ "Mixed": [
+ 24369,
+ "NA",
+ 26201,
+ 26354,
+ 23333,
+ 24885
+ ],
+ "Other": [
+ 25067,
+ "NA",
+ "NA",
+ "NA",
+ 23907,
+ 26294
+ ],
+ "Not known": [
+ 24182,
+ "NA",
+ "NA",
+ 27611,
+ 25853,
+ 22156
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£23,623",
+ "£25,707",
+ "£24,889",
+ "£23,967",
+ "£24,502",
+ "£25,950"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,797",
+ "x",
+ "£23,497",
+ "£24,594",
+ "£25,657",
+ "£24,217"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,462",
+ "£24,859",
+ "£24,263",
+ "£23,957",
+ "£24,951",
+ "£25,075"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,369",
+ "x",
+ "£26,201",
+ "£26,354",
+ "£23,333",
+ "£24,885"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£25,067",
+ "x",
+ "x",
+ "x",
+ "£23,907",
+ "£26,294"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£24,182",
+ "x",
+ "x",
+ "£27,611",
+ "£25,853",
+ "£22,156"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 26060
+ ],
+ "Black": [
+ 25156
+ ],
+ "Asian": [
+ 25032
+ ],
+ "Mixed": [
+ 24466
+ ],
+ "Other": [
+ 23266
+ ],
+ "Not known": [
+ 26745
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "£26,060"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "£25,156"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "£25,032"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "£24,466"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "£23,266"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "£26,745"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,900",
+ "£25,800",
+ "£24,600",
+ "£25,300",
+ "£24,900",
+ "£25,100",
+ "£25,300",
+ "£23,200",
+ "£26,100",
+ "£25,600",
+ "£25,200",
+ "£24,000",
+ "£23,600",
+ "£25,300",
+ "£23,900",
+ "£24,400",
+ "£25,200",
+ "£23,000",
+ "£24,100",
+ "£24,800",
+ "£25,300",
+ "£24,200"
+ ],
+ "footer": "22,475",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£25,300",
+ "£24,400",
+ "£25,600",
+ "£24,600",
+ "£24,700",
+ "£23,500",
+ "£26,100",
+ "x",
+ "x",
+ "£25,100",
+ "£24,300",
+ "x",
+ "x",
+ "£25,300",
+ "£25,600",
+ "x",
+ "x",
+ "£25,900",
+ "£25,200",
+ "£25,900",
+ "£23,500",
+ "£24,700"
+ ],
+ "footer": "21,350",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,400",
+ "£26,500",
+ "£23,600",
+ "£24,100",
+ "£23,700",
+ "£24,300",
+ "£23,000",
+ "x",
+ "x",
+ "£24,000",
+ "£25,200",
+ "x",
+ "£24,800",
+ "£24,800",
+ "£25,300",
+ "x",
+ "x",
+ "£24,700",
+ "£26,100",
+ "£25,300",
+ "£25,400",
+ "£23,000"
+ ],
+ "footer": "19,305",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£24,900",
+ "£26,400",
+ "£25,300",
+ "£25,600",
+ "£24,800",
+ "£25,700",
+ "£24,400",
+ "x",
+ "x",
+ "£25,500",
+ "£25,300",
+ "x",
+ "x",
+ "£25,700",
+ "£24,000",
+ "x",
+ "x",
+ "£24,100",
+ "£25,300",
+ "£25,700",
+ "£27,300",
+ "£25,600"
+ ],
+ "footer": "20,255",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "£26,900",
+ "£23,600",
+ "£24,600",
+ "£24,700",
+ "£25,600",
+ "£24,200",
+ "x",
+ "x",
+ "£27,100",
+ "£26,400",
+ "x",
+ "x",
+ "£25,500",
+ "x",
+ "x",
+ "x",
+ "£25,700",
+ "£25,600",
+ "£26,100",
+ "£23,700",
+ "£25,000"
+ ],
+ "footer": "20,055",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "£26,300",
+ "£24,600",
+ "£25,100",
+ "£23,000",
+ "£23,200",
+ "£25,200",
+ "£25,200",
+ "x",
+ "x",
+ "£24,600",
+ "£24,400",
+ "x",
+ "£24,400",
+ "£24,700",
+ "x",
+ "x",
+ "x",
+ "x",
+ "£25,500",
+ "£24,900",
+ "£24,400",
+ "£25,500"
+ ],
+ "footer": "16,400",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 27300\n var min = 23000\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style",
+ "tag.attribs.columns.6.style",
+ "tag.attribs.columns.7.style",
+ "tag.attribs.columns.8.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of English studies, 1 years after graduation, Administrative and support service activities <\/b> was the most common industry for and White ethnicity graduates,\n Professional, scientific and technical activities <\/b> was the most common industry for and Black ethnicity graduates, Not known <\/b> was the most common industry for and Asian ethnicity graduates, Accommodation and food service activities <\/b> was the most common industry for and Mixed ethnicity graduates, Manufacturing <\/b> was the most common industry for and Other ethnicity graduates, and Information and communication <\/b> was the most common industry for and Not known ethnicity graduates.
The industry with the largest range in proportions was Information and communication<\/b>\n where Not known ethnicity graduates had the highest proportion and Asian\n ethnicity graduates had the lowest proportion.The industry with the largest range in median earnings was Education<\/b>\n where Mixed ethnicity graduates the highest median earnings (£27,300<\/b>) and Black ethnicity graduates had the lowest median earnings (£23,500<\/b>).The group with the highest median earnings was Mixed<\/b> ethnicity graduates in\n the Education<\/b> industry (median earnings of £27,300<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of English studies by ethnicity, one year after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}
diff --git a/tests/shinytest/testUI-current/subjectByIndustry_8.json b/tests/shinytest/testUI-current/subjectByIndustry_8.json
new file mode 100644
index 0000000..7c29115
--- /dev/null
+++ b/tests/shinytest/testUI-current/subjectByIndustry_8.json
@@ -0,0 +1,5904 @@
+{
+ "input": {
+ "countinput2": "ethnicity",
+ "crosstabs.subjectinput": "English studies",
+ "earningsbutton": "Proportions",
+ "navbar": "subjectByIndustry",
+ "qualinput3": "Level 8",
+ "YAGinput2": "1"
+ },
+ "output": {
+ "crosstab": {
+ "x": {
+ "tag": {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Administrative and support service activities",
+ "Real estate activities",
+ "Public administration and defence - compulsory social security",
+ "Accommodation and food service activities",
+ "Professional, scientific and technical activities",
+ "Information and communication",
+ "Agriculture, forestry and fishing",
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Construction",
+ "Water supply - sewerage, waste management and remediation activities",
+ "Electricity, gas, steam and air conditioning supply",
+ "Human health and social work activities",
+ "Transportation and storage",
+ "Mining and quarrying",
+ "Activities of extraterritorial organisations and bodies",
+ "Manufacturing",
+ "Financial and insurance activities",
+ "Other service activities",
+ "Education",
+ "Not known"
+ ],
+ "group_name": [
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All",
+ "All"
+ ],
+ "White": [
+ 0.00556223023183376,
+ 0.105459885195568,
+ 0.00191340719975081,
+ 0.0505050505050505,
+ 0.0698171138699773,
+ 0.0384016375205803,
+ 0.0692386419258666,
+ "NA",
+ 0.102300538423886,
+ 0.0828549815333956,
+ 0.0234503626574111,
+ 0.096560316824634,
+ 0.0516619943932719,
+ 0.0148177813376051,
+ 0.0129933698215637,
+ 0.0267877007965114,
+ 0.0142393093934944,
+ 0.0171761669559026,
+ 0.0531749210163307,
+ 0.0512170159747252,
+ 0.0675032260935345,
+ 0.044364348329106
+ ],
+ "Black": [
+ 0.0518525457866879,
+ 0.0524614736053211,
+ 0.0599091292332194,
+ 0.0685277998969507,
+ 0.11447842990304,
+ 0.154058738114197,
+ 0.0811279216825144,
+ "NA",
+ "NA",
+ 0.0266523022155604,
+ 0.0458569488032226,
+ "NA",
+ "NA",
+ 0.078739051009415,
+ 0.119677736662139,
+ "NA",
+ "NA",
+ 0.0338657548362921,
+ 0.0334910300248255,
+ 0.0421097006885568,
+ 0.0115696285540306,
+ 0.0256218089840274
+ ],
+ "Asian": [
+ 0.0150212369211644,
+ 0.042266652854035,
+ 0.0118615974308505,
+ 0.121827411167513,
+ 0.0625194240132601,
+ 0.00450637107634932,
+ 0.0202009737905314,
+ "NA",
+ "NA",
+ 0.0831347767533409,
+ 0.0495182844711489,
+ "NA",
+ 0.0353258054490832,
+ 0.120895058531027,
+ 0.127991298042059,
+ "NA",
+ "NA",
+ 0.0781104319900549,
+ 0.0602403397907386,
+ 0.0083911737283746,
+ 0.0055941158189164,
+ 0.152595048171553
+ ],
+ "Mixed": [
+ 0.130054806695304,
+ 0.082555670764825,
+ 0.119685972448526,
+ 0.0162938823877944,
+ 0.137757369278625,
+ 0.0230583123487878,
+ 0.0567323359502296,
+ "NA",
+ "NA",
+ 0.0933688836221794,
+ 0.0594973584160371,
+ "NA",
+ "NA",
+ 0.016145756184269,
+ 0.00735693477509505,
+ "NA",
+ "NA",
+ 0.0761862440132326,
+ 0.0925295018022021,
+ 0.0336246482002666,
+ 0.02019453908063,
+ 0.0349577840319953
+ ],
+ "Other": [
+ "NA",
+ 0.0967886705894086,
+ 0.032113294105914,
+ 0.0385459259998005,
+ 0.00503640171536851,
+ 0.129400618330508,
+ 0.0456268076194275,
+ "NA",
+ "NA",
+ 0.026727834845916,
+ 0.0360526578238755,
+ "NA",
+ "NA",
+ 0.0407400019946145,
+ "NA",
+ "NA",
+ "NA",
+ 0.191682457365114,
+ 0.0707589508327516,
+ 0.146853495561983,
+ 0.0599381669492371,
+ 0.0797347162660816
+ ],
+ "Not known": [
+ 0.0919512195121951,
+ 0.1325,
+ 0.00451219512195122,
+ 0.0453658536585366,
+ 0.0406707317073171,
+ 0.0820121951219512,
+ 0.237865853658537,
+ "NA",
+ "NA",
+ 0.015,
+ 0.0217682926829268,
+ "NA",
+ 0.0417073170731707,
+ 0.107682926829268,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0684756097560976,
+ 0.00121951219512195,
+ 0.0245121951219512,
+ 0.0847560975609756
+ ]
+ },
+ "columns": [
+ {
+ "accessor": ".details",
+ "name": "",
+ "type": "NULL",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "sortable": false,
+ "resizable": false,
+ "filterable": false,
+ "width": 45,
+ "align": "center",
+ "details": [
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation",
+ "Arts, entertainment and recreation"
+ ],
+ "group_name": [
+ "Gambling and betting activities",
+ "Amusement and recreation activities",
+ "Libraries; archives; museums and other cultural activities",
+ "Sports activities",
+ "Creative; arts and entertainment activities"
+ ],
+ "White": [
+ 0.0144551227544786,
+ 0.00362933498139707,
+ 0.00759464268678632,
+ 0.00514328614506556,
+ 0.0045542969252274
+ ],
+ "Black": [
+ "NA",
+ 0.0339255456991927,
+ 0.00698943486494568,
+ "NA",
+ 0.00219276387919864
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ 0.00213365457255446,
+ 0.00832023194560712
+ ],
+ "Mixed": [
+ "NA",
+ 0.0127809786577944,
+ 0.00204225161621899,
+ 0.0200032459628337,
+ 0.0115907922854283
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 0.0329713962828912,
+ "NA",
+ 0.0287106183473069,
+ 0.00894916082527756
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "1.4%",
+ "0.4%",
+ "0.8%",
+ "0.5%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "3.4%",
+ "0.7%",
+ "x",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "0.2%",
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "1.3%",
+ "0.2%",
+ "2.0%",
+ "1.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "3.3%",
+ "x",
+ "2.9%",
+ "0.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities",
+ "Administrative and support service activities"
+ ],
+ "group_name": [
+ "Other reservation service and related activities",
+ "Temporary employment agency activities",
+ "Leasing of intellectual property and similar products; except copyrighted works",
+ "Cleaning activities",
+ "Investigation activities",
+ "Renting and leasing of motor vehicles",
+ "Travel agency and tour operator activities",
+ "Landscape service activities",
+ "Combined facilities support activities",
+ "Organisation of conventions and trade shows",
+ "Activities of employment placement agencies",
+ "Renting and leasing of personal and household goods",
+ "Other human resources provision",
+ "Office administrative and support activities",
+ "Private security activities",
+ "Renting and leasing of other machinery; equipment and tangible goods",
+ "Activities of call centres",
+ "Business support service activities n.e.c."
+ ],
+ "White": [
+ 0.00183748045343874,
+ 0.00526772048728488,
+ 0.0011365003256032,
+ 0.0090671157363817,
+ 0.00600188310637892,
+ 0.0039818989510185,
+ 0.00246379997594269,
+ 0.00744532147612312,
+ 0.0042100285784206,
+ 0.00452941005678354,
+ 0.000290346798511765,
+ 0.00698906222131892,
+ 0.00876847331505531,
+ 0.00340950097680959,
+ 0.00384502117457723,
+ 0.00635444707600035,
+ 0.00499396493440236,
+ 0.00062217171109664
+ ],
+ "Black": [
+ "NA",
+ 0.0122595435064288,
+ "NA",
+ 0.0347478321538922,
+ "NA",
+ 0.0109139838532842,
+ 0.0122097079637197,
+ "NA",
+ "NA",
+ "NA",
+ 0.00527010864148311,
+ "NA",
+ "NA",
+ 0.0176791587760391,
+ "NA",
+ "NA",
+ 0.0161342569520582,
+ 0.00991727299910296
+ ],
+ "Asian": [
+ "NA",
+ 0.00563529820119648,
+ "NA",
+ 0.0103109622884211,
+ "NA",
+ 0.0134859219633706,
+ "NA",
+ "NA",
+ "NA",
+ 0.00310349756007922,
+ 0.00240929415848255,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0201421075198563,
+ 0.0146599424219532
+ ],
+ "Mixed": [
+ 0.0210040845032324,
+ 0.013159674321729,
+ "NA",
+ "NA",
+ "NA",
+ 0.0276853580026509,
+ 0.00185290378425167,
+ "NA",
+ 0.0144174849197977,
+ "NA",
+ 0.0332711190456869,
+ "NA",
+ 0.00604560577781384,
+ "NA",
+ 0.00488246909572885,
+ "NA",
+ "NA",
+ 0.000797965863290865
+ ],
+ "Other": [
+ "NA",
+ 0.0261266917817776,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0313590065578345,
+ "NA",
+ "NA",
+ 0.10757639179573,
+ "NA",
+ "NA",
+ 0.0797404771871076,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 0.0297796307325789,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0148440005497778,
+ "NA",
+ "NA",
+ "NA",
+ 0.0110719139903178,
+ "NA",
+ 0.00823139536659489,
+ 0.0182953833936562
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.2%",
+ "0.5%",
+ "0.1%",
+ "0.9%",
+ "0.6%",
+ "0.4%",
+ "0.2%",
+ "0.7%",
+ "0.4%",
+ "0.5%",
+ "0.0%",
+ "0.7%",
+ "0.9%",
+ "0.3%",
+ "0.4%",
+ "0.6%",
+ "0.5%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "1.2%",
+ "x",
+ "3.5%",
+ "x",
+ "1.1%",
+ "1.2%",
+ "x",
+ "x",
+ "x",
+ "0.5%",
+ "x",
+ "x",
+ "1.8%",
+ "x",
+ "x",
+ "1.6%",
+ "1.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.6%",
+ "x",
+ "1.0%",
+ "x",
+ "1.3%",
+ "x",
+ "x",
+ "x",
+ "0.3%",
+ "0.2%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.0%",
+ "1.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "2.1%",
+ "1.3%",
+ "x",
+ "x",
+ "x",
+ "2.8%",
+ "0.2%",
+ "x",
+ "1.4%",
+ "x",
+ "3.3%",
+ "x",
+ "0.6%",
+ "x",
+ "0.5%",
+ "x",
+ "x",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "2.6%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "3.1%",
+ "x",
+ "x",
+ "10.8%",
+ "x",
+ "x",
+ "8.0%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "3.0%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.5%",
+ "x",
+ "x",
+ "x",
+ "1.1%",
+ "x",
+ "0.8%",
+ "1.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Real estate activities",
+ "Real estate activities"
+ ],
+ "group_name": [
+ "Real estate activities on a fee or contract basis",
+ "Renting and operating of own or leased real estate"
+ ],
+ "White": [
+ 0.0105271453517551,
+ 0.00340950097680959
+ ],
+ "Black": [
+ 0.0104405461975481,
+ "NA"
+ ],
+ "Asian": [
+ 0.0137921881699573,
+ 0.0145272270657656
+ ],
+ "Mixed": [
+ 0.0154318483053369,
+ 0.0274013362546999
+ ],
+ "Other": [
+ 0.00715083019394447,
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 0.0302072356866877
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "1.0%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "1.4%",
+ "1.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "1.5%",
+ "2.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "3.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security",
+ "Public administration and defence - compulsory social security"
+ ],
+ "group_name": [
+ "Compulsory social security activities",
+ "Administration of the State and the economic and social policy of the community",
+ "Provision of services to the community as a whole"
+ ],
+ "White": [
+ 0.0132356662007292,
+ 0.00392382959131614,
+ 0.00575716223334757
+ ],
+ "Black": [
+ "NA",
+ 0.0177912887471345,
+ "NA"
+ ],
+ "Asian": [
+ 0.0156093676623721,
+ 0.00559446270698491,
+ 0.0049513036731527
+ ],
+ "Mixed": [
+ "NA",
+ 0.00664069896399686,
+ 0.0121723606264708
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 0.0672875680200921
+ ],
+ "Not known": [
+ "NA",
+ 0.0107053954582245,
+ 0.0141720499076068
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "1.3%",
+ "0.4%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "1.8%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "1.6%",
+ "0.6%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.7%",
+ "1.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "6.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "1.1%",
+ "1.4%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities",
+ "Accommodation and food service activities"
+ ],
+ "group_name": [
+ "Beverage serving activities",
+ "Holiday and other short-stay accommodation",
+ "Hotels and similar accommodation",
+ "Event catering and other food service activities",
+ "Camping grounds; recreational vehicle parks and trailer parks",
+ "Other accommodation",
+ "Restaurants and mobile food service activities"
+ ],
+ "White": [
+ 0.00753242551567665,
+ 0.00391968177990883,
+ 0.00434690635486186,
+ 0.00118627406249093,
+ 0.00943212314022506,
+ 0.00353393531902891,
+ 0.000671945447984371
+ ],
+ "Black": [
+ 0.00766221469151799,
+ "NA",
+ 0.0276088906608193,
+ "NA",
+ "NA",
+ 0.00669042160869132,
+ 0.0090825276587262
+ ],
+ "Asian": [
+ 0.000408354942115687,
+ "NA",
+ 0.0144557649508953,
+ "NA",
+ "NA",
+ "NA",
+ 0.0301365947281377
+ ],
+ "Mixed": [
+ 0.0170007303416376,
+ "NA",
+ 0.0160404663366604,
+ 0.0107928264221375,
+ "NA",
+ 0.0284156996402391,
+ 0.0269144418296411
+ ],
+ "Other": [
+ 0.0343239849309334,
+ "NA",
+ 0.0054416073670992,
+ 0.00976698758197293,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 0.00891861761426979,
+ "NA",
+ 0.0186313587147417,
+ "NA",
+ 0.0172263710083841,
+ "NA",
+ 0.0177150623845085
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.4%",
+ "0.4%",
+ "0.1%",
+ "0.9%",
+ "0.4%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "x",
+ "2.8%",
+ "x",
+ "x",
+ "0.7%",
+ "0.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "0.0%",
+ "x",
+ "1.4%",
+ "x",
+ "x",
+ "x",
+ "3.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "1.7%",
+ "x",
+ "1.6%",
+ "1.1%",
+ "x",
+ "2.8%",
+ "2.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "3.4%",
+ "x",
+ "0.5%",
+ "1.0%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "0.9%",
+ "x",
+ "1.9%",
+ "x",
+ "1.7%",
+ "x",
+ "1.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities",
+ "Professional, scientific and technical activities"
+ ],
+ "group_name": [
+ "Market research and public opinion polling",
+ "Research and experimental development on natural sciences and engineering",
+ "Architectural and engineering activities and related technical consultancy",
+ "Accounting; bookkeeping and auditing activities; tax consultancy",
+ "Other professional; scientific and technical activities n.e.c.",
+ "Management consultancy activities",
+ "Advertising",
+ "Activities of head offices",
+ "Technical testing and analysis",
+ "Photographic activities",
+ "Specialised design activities",
+ "Veterinary activities",
+ "Translation and interpretation activities",
+ "Research and experimental development on social sciences and humanities",
+ "Legal activities"
+ ],
+ "White": [
+ 0.00260482556379127,
+ 0.000812971035832943,
+ 0.00488197402640497,
+ 0.00355882218747278,
+ 0.00379109962628219,
+ 0.0104690759920528,
+ 0.00200754072113849,
+ 0.00496493025455119,
+ 0.00560369321127707,
+ 0.00304864138437354,
+ 0.00442571477160076,
+ 0.00322284946348059,
+ 0.000929109755237649,
+ 0.00404411612212816,
+ 0.00570738849645984
+ ],
+ "Black": [
+ "NA",
+ 0.00307734476228446,
+ 0.0151126283265225,
+ 0.00320193361905711,
+ 0.0264502142928336,
+ 0.00528256752716037,
+ 0.0303623043954949,
+ 0.0150129572411044,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0205073258247782
+ ],
+ "Asian": [
+ 0.017610306878739,
+ "NA",
+ 0.0157012475243482,
+ 0.0108111970925128,
+ 0.00649284357963942,
+ 0.0163444065581804,
+ 0.00776895277375094,
+ "NA",
+ 0.00989239847275252,
+ 0.015527696673949,
+ 0.00575780468383119,
+ 0.00672764767135594,
+ "NA",
+ "NA",
+ 0.0192641443943075
+ ],
+ "Mixed": [
+ 0.00101436338553924,
+ "NA",
+ 0.0194081527766507,
+ 0.0111038978603695,
+ 0.0154724228407585,
+ 0.00848007790310801,
+ 0.0190970813384187,
+ 0.0146609321323271,
+ "NA",
+ "NA",
+ 0.0070734940084936,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ 0.000906934561183201,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 0.0109802843572945,
+ "NA",
+ 0.00235182724759854,
+ 0.019257494540401,
+ 0.00172569142193919,
+ 0.0290160504573846,
+ 0.00123700004581482,
+ 0.00652097555015959,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.040683557062354
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.1%",
+ "0.5%",
+ "0.4%",
+ "0.4%",
+ "1.0%",
+ "0.2%",
+ "0.5%",
+ "0.6%",
+ "0.3%",
+ "0.4%",
+ "0.3%",
+ "0.1%",
+ "0.4%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.3%",
+ "1.5%",
+ "0.3%",
+ "2.6%",
+ "0.5%",
+ "3.0%",
+ "1.5%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "1.8%",
+ "x",
+ "1.6%",
+ "1.1%",
+ "0.6%",
+ "1.6%",
+ "0.8%",
+ "x",
+ "1.0%",
+ "1.6%",
+ "0.6%",
+ "0.7%",
+ "x",
+ "x",
+ "1.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "x",
+ "1.9%",
+ "1.1%",
+ "1.5%",
+ "0.8%",
+ "1.9%",
+ "1.5%",
+ "x",
+ "x",
+ "0.7%",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "0.1%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "x",
+ "0.2%",
+ "1.9%",
+ "0.2%",
+ "2.9%",
+ "0.1%",
+ "0.7%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "4.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication",
+ "Information and communication"
+ ],
+ "group_name": [
+ "Other telecommunications activities",
+ "Publishing of books; periodicals and other publishing activities",
+ "Data processing; hosting and related activities; web portals",
+ "Motion picture; video and television programme activities",
+ "Television programming and broadcasting activities",
+ "Other information service activities",
+ "Software publishing",
+ "Wireless telecommunications activities",
+ "Sound recording and music publishing activities",
+ "Satellite telecommunications activities",
+ "Computer programming; consultancy and related activities",
+ "Wired telecommunications activities",
+ "Radio broadcasting"
+ ],
+ "White": [
+ 0.00438423665752766,
+ 0.00306523263000278,
+ 0.0110207349092251,
+ 0.00710520094072363,
+ 0.00859011742454094,
+ 0.00430957605219606,
+ 0.00313989323533438,
+ 0.00293665047637614,
+ 0.00394871645976001,
+ 0.00186236732188261,
+ 0.00245965216453538,
+ "NA",
+ 0.00552903260594547
+ ],
+ "Black": [
+ 0.0183145619455796,
+ 0.0351963520382737,
+ 0.0184640685737068,
+ 0.0234974583873218,
+ 0.01034087511213,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0265997209209608,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 0.00331788390468996,
+ 0.00851420054311207,
+ 0.0116585335974029,
+ 0.027267901259775,
+ 0.0182943014067828,
+ "NA",
+ "NA",
+ 0.0125467055965045,
+ "NA",
+ "NA",
+ 0.0027359781121751,
+ 0.00283806684770402,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ 0.00343531066569288,
+ 0.00655954989315372,
+ 5.40993805620926e-05,
+ 0.0152154507830885,
+ "NA",
+ "NA",
+ "NA",
+ 0.0100354350942682,
+ "NA",
+ 0.00547756228191187,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ 0.0752058043811916,
+ 0.0261964559787917,
+ 0.0346379238174969,
+ 0.0711943630528813,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0376377842891028,
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ 0.0297032727050595,
+ "NA",
+ 0.0269849269253677,
+ 0.00772743238496663,
+ "NA",
+ "NA",
+ 0.0148745437607856,
+ "NA",
+ "NA",
+ 0.0181579389441212,
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.4%",
+ "0.3%",
+ "1.1%",
+ "0.7%",
+ "0.9%",
+ "0.4%",
+ "0.3%",
+ "0.3%",
+ "0.4%",
+ "0.2%",
+ "0.2%",
+ "x",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "1.8%",
+ "3.5%",
+ "1.8%",
+ "2.3%",
+ "1.0%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.7%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.9%",
+ "1.2%",
+ "2.7%",
+ "1.8%",
+ "x",
+ "x",
+ "1.3%",
+ "x",
+ "x",
+ "0.3%",
+ "0.3%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.3%",
+ "0.7%",
+ "0.0%",
+ "1.5%",
+ "x",
+ "x",
+ "x",
+ "1.0%",
+ "x",
+ "0.5%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "7.5%",
+ "2.6%",
+ "3.5%",
+ "7.1%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "3.8%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "3.0%",
+ "x",
+ "2.7%",
+ "0.8%",
+ "x",
+ "x",
+ "1.5%",
+ "x",
+ "x",
+ "1.8%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Agriculture, forestry and fishing",
+ "Agriculture, forestry and fishing"
+ ],
+ "group_name": [
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Not known"
+ ],
+ "White": [
+ 0.00299471983607849,
+ 7.88084167389077e-05
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of households as employers - undifferentiated goods-and services-producing activities of households for own use"
+ ],
+ "group_name": [
+ "Activities of households as employers of domestic personnel"
+ ],
+ "White": [
+ 0.00307767606422471
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.3%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles",
+ "Wholesale and retail trade - repair of motor vehicles and motorcycles"
+ ],
+ "group_name": [
+ "Wholesale of other machinery; equipment and supplies",
+ "Maintenance and repair of motor vehicles",
+ "Retail sale of cultural and recreation goods in specialised stores",
+ "Retail sale of food; beverages and tobacco in specialised stores",
+ "Retail sale of other household equipment in specialised stores",
+ "Wholesale on a fee or contract basis",
+ "Retail sale in non-specialised stores",
+ "Retail sale of automotive fuel in specialised stores",
+ "Non-specialised wholesale trade",
+ "Retail trade not in stores; stalls or markets",
+ "Wholesale of agricultural raw materials and live animals",
+ "Other specialised wholesale",
+ "Wholesale of household goods",
+ "Wholesale of food; beverages and tobacco",
+ "Sale of motor vehicles",
+ "Retail sale of other goods in specialised stores",
+ "Wholesale of information and communication equipment",
+ "Retail sale of information and communication equipment in specialised stores",
+ "Sale of motor vehicle parts and accessories"
+ ],
+ "White": [
+ 0.00630882115051993,
+ 0.0135011261307971,
+ 0.00632956020755648,
+ 0.00846568308232161,
+ 0.00645399454977581,
+ 0.00124019561078597,
+ 0.0020863491378774,
+ 0.000203242758958236,
+ 0.00666553293154867,
+ 0.0101828770049483,
+ 0.00888046422305271,
+ 0.000298642421326387,
+ 0.0127545200774811,
+ 0.0037164390209506,
+ 0.00444645382863732,
+ 0.00306523263000278,
+ 0.00228544408542832,
+ 0.000974735680718069,
+ 0.00560369321127707
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 0.0163709757799262,
+ "NA",
+ 0.0226876308182996,
+ 0.0389464766271305,
+ 0.00472191767168344,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00200588059403967,
+ "NA",
+ 0.00773696800558158,
+ 0.00759992026313167,
+ "NA",
+ 0.00363799461776139,
+ "NA"
+ ],
+ "Asian": [
+ 0.023102680850195,
+ "NA",
+ 0.0130469404005962,
+ 0.00806501010678482,
+ 0.00578843130448986,
+ "NA",
+ 0.00630908385568736,
+ 0.0163137799375217,
+ 0.0175796802580803,
+ 0.0272883190068808,
+ "NA",
+ 0.000183759723952059,
+ 0.0036547767319354,
+ 0.00903485309430957,
+ "NA",
+ 0.00843252955468893,
+ 0.00427751801866182,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 0.00209635099678109,
+ 0.0157834942789905,
+ 0.0232492087965593,
+ "NA",
+ 0.00593740701668966,
+ "NA",
+ "NA",
+ 0.00357055911709811,
+ "NA",
+ "NA",
+ 0.00286726716979091,
+ 0.0208958857421083,
+ "NA",
+ 0.0259406529795234,
+ 0.00845302821282696,
+ 0.0223565690172848,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00526719687456397,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00987163387749407,
+ 0.0461490163248221,
+ "NA",
+ 0.00875540672526859,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0329561246773873,
+ "NA",
+ "NA",
+ 0.0116216917884577,
+ "NA",
+ "NA",
+ 0.0324979765122707,
+ "NA",
+ "NA",
+ 0.00467311128418931,
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "1.4%",
+ "0.6%",
+ "0.8%",
+ "0.6%",
+ "0.1%",
+ "0.2%",
+ "0.0%",
+ "0.7%",
+ "1.0%",
+ "0.9%",
+ "0.0%",
+ "1.3%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.2%",
+ "0.1%",
+ "0.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "1.6%",
+ "x",
+ "2.3%",
+ "3.9%",
+ "0.5%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.2%",
+ "x",
+ "0.8%",
+ "0.8%",
+ "x",
+ "0.4%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "2.3%",
+ "x",
+ "1.3%",
+ "0.8%",
+ "0.6%",
+ "x",
+ "0.6%",
+ "1.6%",
+ "1.8%",
+ "2.7%",
+ "x",
+ "0.0%",
+ "0.4%",
+ "0.9%",
+ "x",
+ "0.8%",
+ "0.4%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "0.2%",
+ "1.6%",
+ "2.3%",
+ "x",
+ "0.6%",
+ "x",
+ "x",
+ "0.4%",
+ "x",
+ "x",
+ "0.3%",
+ "2.1%",
+ "x",
+ "2.6%",
+ "0.8%",
+ "2.2%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.5%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.0%",
+ "4.6%",
+ "x",
+ "0.9%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "3.3%",
+ "x",
+ "x",
+ "1.2%",
+ "x",
+ "x",
+ "3.2%",
+ "x",
+ "x",
+ "0.5%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction",
+ "Construction"
+ ],
+ "group_name": [
+ "Demolition and site preparation",
+ "Development of building projects",
+ "Building completion and finishing",
+ "Construction of roads and railways",
+ "Construction of other civil engineering projects",
+ "Construction of utility projects",
+ "Other specialised construction activities",
+ "Electrical; plumbing and other construction installation activities",
+ "Construction of residential and non-residential buildings"
+ ],
+ "White": [
+ 0.00683559319924842,
+ 0.00460407066211514,
+ 0.00284125081400799,
+ 0.00541704169794808,
+ 0.00205316664661891,
+ 0.000165912456292437,
+ 0.00501885180284623,
+ 0.00783106793700304,
+ 0.00102865722901311
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 0.00237964716435762,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00566592482185516,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00774973626551976,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00760429747453607
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0208610131183091,
+ "NA",
+ "NA",
+ "NA",
+ 0.00478001252271651
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.5%",
+ "0.3%",
+ "0.5%",
+ "0.2%",
+ "0.0%",
+ "0.5%",
+ "0.8%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "0.2%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.6%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.8%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.1%",
+ "x",
+ "x",
+ "x",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Water supply - sewerage, waste management and remediation activities",
+ "Water supply - sewerage, waste management and remediation activities"
+ ],
+ "group_name": [
+ "Water collection; treatment and supply",
+ "Waste collection"
+ ],
+ "White": [
+ 0.00962292246496136,
+ 0.00657842889199514
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "1.0%",
+ "0.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Electricity, gas, steam and air conditioning supply",
+ "Electricity, gas, steam and air conditioning supply"
+ ],
+ "group_name": [
+ "Electric power generation; transmission and distribution",
+ "Manufacture of gas; distribution of gaseous fuels through mains"
+ ],
+ "White": [
+ 0.00118212625108362,
+ 0.00232692219950143
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 0.0217959450354248,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 0.0366823964203357,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "2.2%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "3.7%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities",
+ "Human health and social work activities"
+ ],
+ "group_name": [
+ "Residential nursing care activities",
+ "Other social work activities without accommodation",
+ "Hospital activities",
+ "Residential care activities for mental retardation; mental health and substance abuse",
+ "Other residential care activities",
+ "Other human health activities",
+ "Social work activities without accommodation for the elderly and disabled",
+ "Residential care activities for the elderly and disabled",
+ "Medical and dental practice activities"
+ ],
+ "White": [
+ 0.000481146123248068,
+ 0.00749924302441817,
+ 0.00945286219726161,
+ 0.0100252601714705,
+ 0.00534238109261648,
+ 0.00100791817197656,
+ 0.0125595729413375,
+ 0.0131983358980634,
+ 0.00517232082491673
+ ],
+ "Black": [
+ 0.0167447423502442,
+ 0.0280075750024918,
+ 0.00311472141931626,
+ "NA",
+ 0.0347478321538922,
+ 0.0188752118010565,
+ 0.00910744543008073,
+ 0.0327793282168843,
+ "NA"
+ ],
+ "Asian": [
+ 0.00814668109520796,
+ 0.00459399309880148,
+ 0.0166404638912142,
+ 0.00079629213712559,
+ 0.0109949568164649,
+ 0.0237866753782388,
+ 0.00220511668742471,
+ 0.00596198215488903,
+ 0.00208261020479
+ ],
+ "Mixed": [
+ "NA",
+ 0.00150125781059807,
+ 0.0288620195298764,
+ "NA",
+ 0.000770916173009819,
+ 0.0229246125131867,
+ 0.0103600313776407,
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ 0.0417887540114413,
+ 0.0283591460862285,
+ "NA",
+ "NA",
+ 0.0202664992325938,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 0.0083382966051221,
+ "NA",
+ "NA",
+ 0.0293367541729662,
+ 0.00200058032100915,
+ "NA",
+ 0.0247552725218002,
+ 0.0413707793100289,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.0%",
+ "0.7%",
+ "0.9%",
+ "1.0%",
+ "0.5%",
+ "0.1%",
+ "1.3%",
+ "1.3%",
+ "0.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "1.7%",
+ "2.8%",
+ "0.3%",
+ "x",
+ "3.5%",
+ "1.9%",
+ "0.9%",
+ "3.3%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "0.5%",
+ "1.7%",
+ "0.1%",
+ "1.1%",
+ "2.4%",
+ "0.2%",
+ "0.6%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "0.2%",
+ "2.9%",
+ "x",
+ "0.1%",
+ "2.3%",
+ "1.0%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "4.2%",
+ "2.8%",
+ "x",
+ "x",
+ "2.0%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "0.8%",
+ "x",
+ "x",
+ "2.9%",
+ "0.2%",
+ "x",
+ "2.5%",
+ "4.1%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage",
+ "Transportation and storage"
+ ],
+ "group_name": [
+ "Sea and coastal passenger water transport",
+ "Transport via pipeline",
+ "Freight transport by road and removal services",
+ "Passenger rail transport; interurban",
+ "Other postal and courier activities",
+ "Freight air transport and space transport",
+ "Sea and coastal freight water transport",
+ "Passenger air transport",
+ "Postal activities under universal service obligation",
+ "Other passenger land transport",
+ "Warehousing and storage",
+ "Support activities for transportation",
+ "Inland passenger water transport"
+ ],
+ "White": [
+ 0.000676093259391682,
+ 0.00856108274468976,
+ 0.00232277438809412,
+ 0.00247209559875732,
+ 0.00387820366583572,
+ 0.00806334537581245,
+ 0.00580278815882799,
+ 0.00685633225628497,
+ 0.00605165684326665,
+ 0.00648302922962699,
+ 0.00749509521301085,
+ 0.00452111443396892,
+ 0.00709690531790901
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00827270008970398,
+ "NA",
+ 0.0102661217980664,
+ "NA",
+ 0.00697697597926841,
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ 0.00791187700349143,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0276558384547849,
+ "NA",
+ 0.0203462849909141,
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0160404663366604,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0223700938624253,
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "0.9%",
+ "0.2%",
+ "0.2%",
+ "0.4%",
+ "0.8%",
+ "0.6%",
+ "0.7%",
+ "0.6%",
+ "0.6%",
+ "0.7%",
+ "0.5%",
+ "0.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.8%",
+ "x",
+ "1.0%",
+ "x",
+ "0.7%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "0.8%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.8%",
+ "x",
+ "2.0%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.6%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.2%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Mining and quarrying",
+ "Mining and quarrying"
+ ],
+ "group_name": [
+ "Combined facilities support activities",
+ "Cleaning activities"
+ ],
+ "White": [
+ 0.0111493170628518,
+ 0.00764026861226674
+ ],
+ "Black": [
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "group_name": [
+ "Activities of extraterritorial organisations and bodies"
+ ],
+ "White": [
+ 0.00681485414221186
+ ],
+ "Black": [
+ "NA"
+ ],
+ "Asian": [
+ "NA"
+ ],
+ "Mixed": [
+ "NA"
+ ],
+ "Other": [
+ "NA"
+ ],
+ "Not known": [
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing",
+ "Manufacturing"
+ ],
+ "group_name": [
+ "Manufacture of other food products",
+ "Processing and preserving of meat and production of meat products",
+ "Manufacture of other chemical products",
+ "Finishing of textiles",
+ "Manufacture of prepared animal feeds",
+ "Tanning and dressing of leather; manufacture of luggage; handbags; saddlery and harness; dressing and dyeing of fur",
+ "Manufacture of other porcelain and ceramic products",
+ "Manufacture of agricultural and forestry machinery",
+ "Manufacture of clay building materials",
+ "Manufacture of basic chemicals; fertilisers and nitrogen compounds; plastics and synthetic rubber in primary forms",
+ "Manufacture of general-purpose machinery",
+ "Manufacture of other fabricated metal products",
+ "Manufacture of soap and detergents; cleaning and polishing preparations; perfumes and toilet preparations",
+ "Manufacture of products of wood; cork; straw and plaiting materials",
+ "Manufacture of domestic appliances",
+ "Repair of fabricated metal products; machinery and equipment",
+ "Printing and service activities related to printing",
+ "Manufacture of grain mill products; starches and starch products",
+ "Manufacture of articles of paper and paperboard",
+ "Manufacture of structural metal products",
+ "Manufacture of other general-purpose machinery",
+ "Manufacture of footwear",
+ "Manufacture of other textiles",
+ "Manufacture of electric motors; generators; transformers and electricity distribution and control apparatus",
+ "Manufacture of electric lighting equipment",
+ "Manufacture of glass and glass products",
+ "Manufacture of air and spacecraft and related machinery",
+ "Manufacture of bakery and farinaceous products",
+ "Processing and preserving of fruit and vegetables",
+ "Manufacturing n.e.c.",
+ "Manufacture of articles of concrete; cement and plaster",
+ "Reproduction of recorded media",
+ "Manufacture of sports goods",
+ "Building of ships and boats",
+ "Manufacture of motor vehicles",
+ "Manufacture of refined petroleum products",
+ "Casting of metals",
+ "Manufacture of optical instruments and photographic equipment",
+ "Manufacture of pharmaceutical preparations",
+ "Manufacture of furniture",
+ "Weaving of textiles",
+ "Manufacture of parts and accessories for motor vehicles",
+ "Manufacture of plastics products",
+ "Treatment and coating of metals; machining",
+ "Installation of industrial machinery and equipment",
+ "Manufacture of instruments and appliances for measuring; testing and navigation; watches and clocks",
+ "Manufacture of weapons and ammunition",
+ "Manufacture of consumer electronics",
+ "Manufacture of other electrical equipment",
+ "Manufacture of wearing apparel; except fur apparel",
+ "Manufacture of basic iron and steel and of ferro-alloys",
+ "Manufacture of beverages"
+ ],
+ "White": [
+ 0.00250942590142311,
+ 0.00562443226831362,
+ 1.24434342219328e-05,
+ 0.0125429816957083,
+ 0.00885142954320153,
+ 0.00342194441103152,
+ 0.0020490188352116,
+ 0.00193702792721421,
+ "NA",
+ 0.000783936355981766,
+ 0.000277903364289832,
+ 0.0107594227905646,
+ 0.00631711677333455,
+ 0.00530090297854337,
+ 0.00263800805504975,
+ 0.00066779763657706,
+ 0.000638762956725884,
+ 0.00953581842540783,
+ 0.00150150772944656,
+ 0.00652865515510741,
+ 0.000895927263979161,
+ 0.0154381540580113,
+ 0.00683559319924842,
+ 0.000597284842652774,
+ 0.00409388985901589,
+ 0.00436764541189841,
+ 0.00931183660941304,
+ 0.00533408546980186,
+ 0.000165912456292437,
+ 0.00265045148927169,
+ 0.00689781037035808,
+ 0.0075116864586401,
+ 0.00219419223446748,
+ 0.00172963735684866,
+ 0.00403996831072085,
+ 0.00688951474754346,
+ 0.00445060164004463,
+ 0.00792646759937119,
+ 0.00524698143024833,
+ 0.00312744980111244,
+ 0.00923717600408145,
+ 0.00617609118548598,
+ 0.0039072383456869,
+ 0.00571153630786715,
+ 0.00684803663347035,
+ 0.000696832316428237,
+ 0.00366666528406286,
+ 0.00366251747265555,
+ 0.0110124392864105,
+ 0.00790572854233464,
+ 0.00293665047637614,
+ 0.00764856423508136
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0258397288946477,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0154490182398086,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00517043755606499,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0221838822304347,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0203667027380199,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0101782469322335,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00254200951467015,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0206831778181595,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0110768481700885,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0191917552544023,
+ "NA",
+ 0.0230733858097325,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00140658389461441,
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.00217750006762423,
+ "NA",
+ 0.000622142876464065
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ 0.0186619227012697,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.3%",
+ "0.6%",
+ "0.0%",
+ "1.3%",
+ "0.9%",
+ "0.3%",
+ "0.2%",
+ "0.2%",
+ "x",
+ "0.1%",
+ "0.0%",
+ "1.1%",
+ "0.6%",
+ "0.5%",
+ "0.3%",
+ "0.1%",
+ "0.1%",
+ "1.0%",
+ "0.2%",
+ "0.7%",
+ "0.1%",
+ "1.5%",
+ "0.7%",
+ "0.1%",
+ "0.4%",
+ "0.4%",
+ "0.9%",
+ "0.5%",
+ "0.0%",
+ "0.3%",
+ "0.7%",
+ "0.8%",
+ "0.2%",
+ "0.2%",
+ "0.4%",
+ "0.7%",
+ "0.4%",
+ "0.8%",
+ "0.5%",
+ "0.3%",
+ "0.9%",
+ "0.6%",
+ "0.4%",
+ "0.6%",
+ "0.7%",
+ "0.1%",
+ "0.4%",
+ "0.4%",
+ "1.1%",
+ "0.8%",
+ "0.3%",
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.6%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.5%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.5%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.2%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.0%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.0%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.3%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "2.1%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.1%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.9%",
+ "x",
+ "2.3%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.1%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "0.2%",
+ "x",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "1.9%",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities",
+ "Financial and insurance activities"
+ ],
+ "group_name": [
+ "Pension funding",
+ "Reinsurance",
+ "Activities auxiliary to insurance and pension funding",
+ "Monetary intermediation",
+ "Activities auxiliary to financial services; except insurance and pension funding",
+ "Other financial service activities; except insurance and pension funding",
+ "Fund management activities",
+ "Insurance",
+ "Trusts; funds and similar financial entities",
+ "Activities of holding companies"
+ ],
+ "White": [
+ 0.00688951474754346,
+ 0.00783936355981766,
+ 0.0127047463405934,
+ 0.00426395012671564,
+ 0.00408974204760858,
+ 0.00902563762230859,
+ 0.00427639356093757,
+ 0.00237669593638916,
+ "NA",
+ 0.00968928744747834
+ ],
+ "Black": [
+ "NA",
+ "NA",
+ 0.0239833549287352,
+ 0.0114746337087611,
+ 0.0220522276487591,
+ 0.00133310076746736,
+ 0.00485896541413336,
+ 0.000137047742449915,
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ 0.0167323437531903,
+ "NA",
+ 0.00692161626886089,
+ 0.00897359985299222,
+ 0.00787104150927987,
+ 0.00969842987524757,
+ 0.0204585825999959,
+ 0.00492067705249403,
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ "NA",
+ "NA",
+ 0.0243717709432227,
+ 0.000581568341042495,
+ 0.0282804511888339,
+ 0.00454434796721578,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ "NA",
+ "NA",
+ 0.0647062927305707,
+ 0.00160457653132412,
+ "NA",
+ 0.0213478442863123,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ "NA",
+ "NA",
+ 0.0266336799987783,
+ 0.0040011606420183,
+ 0.0110566423848139,
+ 0.0190131488523388,
+ "NA",
+ "NA",
+ 0.044852705364915,
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "0.8%",
+ "1.3%",
+ "0.4%",
+ "0.4%",
+ "0.9%",
+ "0.4%",
+ "0.2%",
+ "x",
+ "1.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "2.4%",
+ "1.1%",
+ "2.2%",
+ "0.1%",
+ "0.5%",
+ "0.0%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "1.7%",
+ "x",
+ "0.7%",
+ "0.9%",
+ "0.8%",
+ "1.0%",
+ "2.0%",
+ "0.5%",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "2.4%",
+ "0.1%",
+ "2.8%",
+ "0.5%",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "6.5%",
+ "0.2%",
+ "x",
+ "2.1%",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "x",
+ "2.7%",
+ "0.4%",
+ "1.1%",
+ "1.9%",
+ "x",
+ "x",
+ "4.5%",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities",
+ "Other service activities"
+ ],
+ "group_name": [
+ "Other personal service activities",
+ "Activities of business; employers and professional membership organisations",
+ "Activities of other membership organisations",
+ "Activities of trade unions",
+ "Repair of computers and communication equipment",
+ "Repair of personal and household goods"
+ ],
+ "White": [
+ 0.000887631641164539,
+ 0.00782277231418842,
+ 0.0092952453637838,
+ 0.000999622549161935,
+ 0.000543363294357732,
+ 0.00152224678648311
+ ],
+ "Black": [
+ 0.0163709757799262,
+ 0.000622944283863251,
+ "NA",
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Asian": [
+ "NA",
+ 0.016375033178839,
+ 0.0213263368519918,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Mixed": [
+ 0.0333387432713895,
+ "NA",
+ 0.0208958857421083,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Other": [
+ 0.0306264824891865,
+ "NA",
+ 0.0496023440770197,
+ "NA",
+ "NA",
+ "NA"
+ ],
+ "Not known": [
+ 0.0291076800904079,
+ 0.0179441364670668,
+ 0.0293062109619584,
+ "NA",
+ "NA",
+ "NA"
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.1%",
+ "0.8%",
+ "0.9%",
+ "0.1%",
+ "0.1%",
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "1.6%",
+ "0.1%",
+ "x",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "x",
+ "1.6%",
+ "2.1%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "3.3%",
+ "x",
+ "2.1%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "3.1%",
+ "x",
+ "5.0%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "2.9%",
+ "1.8%",
+ "2.9%",
+ "x",
+ "x",
+ "x"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education",
+ "Education"
+ ],
+ "group_name": [
+ "Other education",
+ "Pre-primary education",
+ "Educational support activities",
+ "Higher education",
+ "Primary education",
+ "Secondary education"
+ ],
+ "White": [
+ 0.00609313495733976,
+ 0.00380354306050413,
+ 0.003641778415619,
+ 0.00318966697222211,
+ 0.00352563969621429,
+ 0.0102782766673165
+ ],
+ "Black": [
+ 0.0245190870128576,
+ "NA",
+ 0.00313963919067079,
+ 0.0275715140037875,
+ 0.0205073258247782,
+ 0.0223636997906907
+ ],
+ "Asian": [
+ 0.0322294138064806,
+ 0.0215509320701554,
+ 0.0191416379116728,
+ 0.00341997264021888,
+ 0.00855503603732364,
+ 0.000632950160279315
+ ],
+ "Mixed": [
+ 0.0226676404555168,
+ "NA",
+ 0.0296058860126052,
+ 0.02481809083286,
+ 0.0239254510535854,
+ 0.00443614920609159
+ ],
+ "Other": [
+ 0.0111971536207618,
+ "NA",
+ "NA",
+ "NA",
+ 0.00627877773126831,
+ 0.0111273894237477
+ ],
+ "Not known": [
+ 0.00720819779783449,
+ "NA",
+ "NA",
+ 0.0160504573845848,
+ 0.0242971243566836,
+ 0.00920877811884363
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.6%",
+ "0.4%",
+ "0.4%",
+ "0.3%",
+ "0.4%",
+ "1.0%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "2.5%",
+ "x",
+ "0.3%",
+ "2.8%",
+ "2.1%",
+ "2.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "3.2%",
+ "2.2%",
+ "1.9%",
+ "0.3%",
+ "0.9%",
+ "0.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "2.3%",
+ "x",
+ "3.0%",
+ "2.5%",
+ "2.4%",
+ "0.4%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "1.1%",
+ "x",
+ "x",
+ "x",
+ "0.6%",
+ "1.1%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "0.7%",
+ "x",
+ "x",
+ "1.6%",
+ "2.4%",
+ "0.9%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ },
+ {
+ "name": "div",
+ "attribs": {
+ "style": {
+ "padding": "16px"
+ }
+ },
+ "children": [
+ {
+ "name": "Reactable",
+ "attribs": {
+ "data": {
+ "SECTIONNAME": [
+ "Not known"
+ ],
+ "group_name": [
+ "Not known"
+ ],
+ "White": [
+ 0.00799283258188817
+ ],
+ "Black": [
+ 0.00669042160869132
+ ],
+ "Asian": [
+ 0.0248279804806338
+ ],
+ "Mixed": [
+ 0.0158240688144121
+ ],
+ "Other": [
+ 0.00223245430445096
+ ],
+ "Not known": [
+ 0.0317954826590919
+ ]
+ },
+ "columns": [
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "cell": [
+ "0.8%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "cell": [
+ "0.7%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "cell": [
+ "2.5%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "cell": [
+ "1.6%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "cell": [
+ "0.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "cell": [
+ "3.2%"
+ ],
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 300,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "outlined": true,
+ "dataKey": "random_key",
+ "key": "random_key",
+ "nested": true
+ },
+ "children": [
+
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "accessor": "SECTIONNAME",
+ "name": "Industry",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 500
+ },
+ {
+ "accessor": "group_name",
+ "name": "3 digit SIC code",
+ "type": "character",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "footer": "TOTAL (N)",
+ "na": "x",
+ "width": 300
+ },
+ {
+ "accessor": "White",
+ "name": "White",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "0.6%",
+ "10.5%",
+ "0.2%",
+ "5.1%",
+ "7.0%",
+ "3.8%",
+ "6.9%",
+ "x",
+ "10.2%",
+ "8.3%",
+ "2.3%",
+ "9.7%",
+ "5.2%",
+ "1.5%",
+ "1.3%",
+ "2.7%",
+ "1.4%",
+ "1.7%",
+ "5.3%",
+ "5.1%",
+ "6.8%",
+ "4.4%"
+ ],
+ "footer": "22,475",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['White']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Black",
+ "name": "Black",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "5.2%",
+ "5.2%",
+ "6.0%",
+ "6.9%",
+ "11.4%",
+ "15.4%",
+ "8.1%",
+ "x",
+ "x",
+ "2.7%",
+ "4.6%",
+ "x",
+ "x",
+ "7.9%",
+ "12.0%",
+ "x",
+ "x",
+ "3.4%",
+ "3.3%",
+ "4.2%",
+ "1.2%",
+ "2.6%"
+ ],
+ "footer": "21,350",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Black']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Asian",
+ "name": "Asian",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "1.5%",
+ "4.2%",
+ "1.2%",
+ "12.2%",
+ "6.3%",
+ "0.5%",
+ "2.0%",
+ "x",
+ "x",
+ "8.3%",
+ "5.0%",
+ "x",
+ "3.5%",
+ "12.1%",
+ "12.8%",
+ "x",
+ "x",
+ "7.8%",
+ "6.0%",
+ "0.8%",
+ "0.6%",
+ "15.3%"
+ ],
+ "footer": "19,305",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Asian']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Mixed",
+ "name": "Mixed",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "13.0%",
+ "8.3%",
+ "12.0%",
+ "1.6%",
+ "13.8%",
+ "2.3%",
+ "5.7%",
+ "x",
+ "x",
+ "9.3%",
+ "5.9%",
+ "x",
+ "x",
+ "1.6%",
+ "0.7%",
+ "x",
+ "x",
+ "7.6%",
+ "9.3%",
+ "3.4%",
+ "2.0%",
+ "3.5%"
+ ],
+ "footer": "20,255",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Mixed']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Other",
+ "name": "Other",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "x",
+ "9.7%",
+ "3.2%",
+ "3.9%",
+ "0.5%",
+ "12.9%",
+ "4.6%",
+ "x",
+ "x",
+ "2.7%",
+ "3.6%",
+ "x",
+ "x",
+ "4.1%",
+ "x",
+ "x",
+ "x",
+ "19.2%",
+ "7.1%",
+ "14.7%",
+ "6.0%",
+ "8.0%"
+ ],
+ "footer": "20,055",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Other']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ },
+ {
+ "accessor": "Not known",
+ "name": "Not known",
+ "type": "numeric",
+ "footerStyle": {
+ "fontWeight": "bold"
+ },
+ "cell": [
+ "9.2%",
+ "13.2%",
+ "0.5%",
+ "4.5%",
+ "4.1%",
+ "8.2%",
+ "23.8%",
+ "x",
+ "x",
+ "1.5%",
+ "2.2%",
+ "x",
+ "4.2%",
+ "10.8%",
+ "x",
+ "x",
+ "x",
+ "x",
+ "6.8%",
+ "0.1%",
+ "2.5%",
+ "8.5%"
+ ],
+ "footer": "16,400",
+ "na": "x",
+ "style": "\n // source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1\n function(rowInfo) {\n // source: https://stackoverflow.com/a/44134328/4856719\n function hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0');\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n }\n var value = rowInfo.row['Not known']\n var max = 0.237865853658537\n var min = 0.00121951219512195\n // pct_value = (value - min) * 100 / (max - min)\n pct_value = (Math.min(value, max) - min) * 100 / (max - min)\n // If value equals 0, set font color grey.\n if (value == 0) {\n var color = '#F7FBFF'\n var bg = '#F7FBFF'\n } else {\n var color = '#000000'\n var bg = hslToHex(209, 59, 100 - pct_value / 2)\n }\n return { color: color, backgroundColor: bg}\n }"
+ }
+ ],
+ "defaultPageSize": 22,
+ "paginationType": "numbers",
+ "showPageInfo": true,
+ "minRows": 1,
+ "showSortable": true,
+ "height": "600px",
+ "dataKey": "random_key",
+ "key": "random_key"
+ },
+ "children": [
+
+ ]
+ },
+ "class": "reactR_markup"
+ },
+ "evals": [
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.0.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.1.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.2.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.3.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.4.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.5.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.6.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.7.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.8.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.9.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.10.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.11.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.12.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.13.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.14.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.15.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.16.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.17.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.18.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.19.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.20.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.2.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.3.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.4.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.5.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.6.style",
+ "tag.attribs.columns.0.details.21.children.0.attribs.columns.7.style",
+ "tag.attribs.columns.3.style",
+ "tag.attribs.columns.4.style",
+ "tag.attribs.columns.5.style",
+ "tag.attribs.columns.6.style",
+ "tag.attribs.columns.7.style",
+ "tag.attribs.columns.8.style"
+ ],
+ "jsHooks": [
+
+ ],
+ "deps": [
+
+ ]
+ },
+ "crosstab_text": "For first degree graduates of English studies, 1 years after graduation, Administrative and support service activities <\/b> was the most common industry for and White ethnicity graduates,\n Professional, scientific and technical activities <\/b> was the most common industry for and Black ethnicity graduates, Not known <\/b> was the most common industry for and Asian ethnicity graduates, Accommodation and food service activities <\/b> was the most common industry for and Mixed ethnicity graduates, Manufacturing <\/b> was the most common industry for and Other ethnicity graduates, and Information and communication <\/b> was the most common industry for and Not known ethnicity graduates.
The industry with the largest range in proportions was Information and communication<\/b>\n where Not known ethnicity graduates had the highest proportion and Asian\n ethnicity graduates had the lowest proportion.The industry with the largest range in median earnings was Education<\/b>\n where Mixed ethnicity graduates the highest median earnings (£27,300<\/b>) and Black ethnicity graduates had the lowest median earnings (£23,500<\/b>).The group with the highest median earnings was Mixed<\/b> ethnicity graduates in\n the Education<\/b> industry (median earnings of £27,300<\/b>).
",
+ "crosstab_title": " Industry of graduate employment for graduates of English studies by ethnicity, one year after\n graduation, male and female first degree graduates from English HEIs, APs and FECs,\n 2018/19 tax year.<\/h4>"
+ }
+}